Javascript/amcharts - 動態控制amcharts的屬性值

我想稍微複製amcharts在this link即demo中對其演示圖表所做的操作。添加控件以更改圖形的屬性。但我不明白價值更新如何在JavaScript中工作。這裏是我的代碼：Javascript/amcharts - 動態控制amcharts的屬性值

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>

使用Javascript/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>

我要動態更新圖表的不透明度。我怎麼做？這應該很簡單，但我在JavaScript開發中很新。

編輯：與工作

使用Javascript/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 - 動態控制amcharts的屬性值

回答

相關問題