[英]Update Variable with javascript after chart has been loaded - amcharts
我需要使用選擇菜單來更新多個JSON數組中的數據。
這個想法是這樣的:選擇一個年份,該年份將使用與該年份關聯的數據更新全局變量(JSON Array)。
我的問題是我不確定變量范圍以及如何控制它。 我還發現amcharts可以在加載時構建圖表,因此更新變量將無濟於事
是否可以使用新數據集更新全局變量,然后使用新數據重新加載圖表? 看起來像什么?
不確定此更新是否有用,或者是否更清楚。
這是我制作的一張圖表的小提琴的鏈接:
http://jsfiddle.net/kenaesthetic/33JH9/
速記結構如下所示:
<head>
<script> amchart script </script>
<head>
<body>
<select>
<option>2010</option
<option>2011</option
<option>2012</option
<option>2013</option
<option>2014</option
</select>
<div id="chart-container-1"></div> // These charts are stacked (refer to the fiddle)
<div id="chart-container-2"></div>
<div id="chart-container-3"></div>
<div id="chart-container-4"></div>
<div id="chart-container-5"></div>
</body>
我認為您想做更多這樣的事情:
var chart;
var chartData = [
{
"subject": "Personal Services",
"2010": 493142064,
"2011": 540156996,
"2012": 593541335,
"2013": 640585618,
"2014": 689417065
}
];
AmCharts.ready(function () {
// SERIALL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "subject";
chart.plotAreaBorderAlpha = 0.2;
chart.rotate = true;
// AXES
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = "start";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.stackType = "regular";
valueAxis.gridAlpha = 0.1;
valueAxis.axisAlpha = 0;
chart.addValueAxis(valueAxis);
// GRAPHS
// firstgraph
var graph = new AmCharts.AmGraph();
graph.title = "2010";
graph.labelText = "[[value]]";
graph.valueField = "2010";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#C72C95";
graph.balloonText = "<b><span style='color:#C72C95'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>";
chart.addGraph(graph);
// second graph
graph = new AmCharts.AmGraph();
graph.title = "2011";
graph.labelText = "[[value]]";
graph.valueField = "2011";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#D8E0BD";
graph.balloonText = "<b><span style='color:#afbb86'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>";
chart.addGraph(graph);
// third graph
graph = new AmCharts.AmGraph();
graph.title = "2012";
graph.labelText = "[[value]]";
graph.valueField = "2012";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#B3DBD4";
graph.balloonText = "<b><span style='color:#74bdb0'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>";
chart.addGraph(graph);
// fourth graph
graph = new AmCharts.AmGraph();
graph.title = "2013";
graph.labelText = "[[value]]";
graph.valueField = "2013";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#69A55C";
graph.balloonText = "<b><span style='color:#69A55C'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>";
chart.addGraph(graph);
// fifth graph
graph = new AmCharts.AmGraph();
graph.title = "2014";
graph.labelText = "[[value]]";
graph.valueField = "2014";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#B5B8D3";
graph.balloonText = "<b><span style='color:#7a81be'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>";
chart.addGraph(graph);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.position = "right";
legend.borderAlpha = 0.3;
legend.horizontalGap = 10;
legend.switchType = "v";
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
// Make chart 2D/3D
function setDepth() {
if (document.getElementById("rb1").checked) {
chart.depth3D = 0;
chart.angle = 0;
} else {
chart.depth3D = 20;
chart.angle = 30;
}
chart.validateNow();
}
本示例基於AmChart的堆疊圖表示例代碼。 它確實將圖表的數據分離到一個全局Javascript變量中,即chartData。
您需要將問題分為兩部分:對數據的操作,然后在更改數據后將數據加載到圖表中。
這是使用jQuery和按鈕操作數據的非常簡單的示例。 http://jsfiddle.net/stevewilhelm/XzmQ6/2/
修改數據后,您將需要更新圖表。 請參閱http://blog.amcharts.com/2013/08/tutorial-live-editing-chart-data.html作為示例。
並查看chart.dataProvider chart.validateData()以獲得詳細信息。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.