Javascript/amcharts - amchart의 속성 값을 동적으로 제어합니다.

amcharts가 데모 차트에 적용한 내용을 this link에 완만하게 복제하려고합니다. 그래프의 속성을 변경하는 컨트롤을 추가합니다. 하지만 값을 업데이 트하는 방법을 자바 스크립트에서 작동 알아낼 수 없습니다.Javascript/amcharts - amchart의 속성 값을 동적으로 제어합니다.

HTML :

<body> 
... 
<div id="chartdiv" style="width=100%; height:400px;"></div> 
<input type="range" min="0.1" max="1.0" value="0.5" step="0.01" id="mySlider"> 
... 
</body>

자바 스크립트/amCharts :

<script> 
// data for amCharts 
var chartData = [ { 
    "country": "USA", 
    "visits": 4252 
    }, { 
    "country": "China", 
    "visits": 1882 
    }]; 

// drawing amCharts using object-based method 
AmCharts.ready(function() { 
    //var chart = AmCharts.makeChart("chartdiv"); 
    var chart = new AmCharts.AmSerialChart(); 
    chart.dataProvider = chartData; 
    chart.categoryField = "country"; 

    var graph = new AmCharts.AmGraph(); 
    graph.valueField = "visits"; 
    graph.type = "column"; 
    graph.fillAlphas = updateValue(); 
    chart.addGraph(graph); 

    chart.write("chartdiv") 
}); 

// here is my function to update value dynamically 
function updateValue() { 
    val = document.getElementById("mySlider").value; 
    return val; 
} 
</script>

내가 동적 그래프의 불투명도를 업데이트하려면 여기 내 코드입니다. 어떻게해야합니까? 이것은 간단해야하지만 나는 자바 스크립트 개발에 아주 새로운 것이다.

편집 :

자바 스크립트/amCharts에게 작동 최종 코드를 업데이트하는 것은 :

<script> 
... 
// drawing amCharts using object-based method 
AmCharts.ready(function() { 
    //var chart = AmCharts.makeChart("chartdiv"); 
    var chart = new AmCharts.AmSerialChart(); 
    chart.dataProvider = chartData; 
    chart.categoryField = "country"; 

    var graph = new AmCharts.AmGraph(); 
    graph.valueField = "visits"; 
    graph.type = "column"; 
    graph.fillAlphas = updateValue(); 
    chart.addGraph(graph); 

    chart.write("chartdiv"); 

    //add this code to add dynamic opacity control 
    //** "jquery.js" script needs to be linked **// 
    $('#mySlider').on('input change', function() { 
     //var target = chart; 
     //chart.startDuration = 0;   
     var target = chart.graphs[0] 
     target['fillAlphas'] = this.value; 
     chart.validateNow(); 
    }); 

}); 
... 
</script>

출처

2017-10-11 addicted

이 입력의 변경 이벤트에이 코드를 시도

jQuery('#mySlider').off().on('input change', function() { 
     var target = chart; 
     chart.startDuration = 0; 
     target = chart.graphs[0]; 
     target['fillAlphas'] = this.value; 
     chart.validateNow(); 
    });

출처

2017-10-11 07:11:51

이 나 있지만 작동 '.off()'와 처음 두 줄의 사용법이 궁금합니다'var target = chart; chart.startDuration = 0;'? 그 선/코드없이 동적 인 변경 작업을 할 수 있습니다. – addicted

Javascript/amcharts - amchart의 속성 값을 동적으로 제어합니다.

답변

관련 문제