Question

我对以下位置已提供的解决方案有疑问 Update the dataset of multiple AmCharts with a Single Dropdown Change Event

我的一项任务需要相同的解决方案。我已将所有css，js，jquery和json数据集文件下载并保存在同一目录中，并更改了html文件中src标记中的地址。还更改了index.js文件中默认数据集json的地址。但这是行不通的。下拉菜单显示，但两个图表均未显示。你能帮忙吗？这是我的index.htm文件中的代码

<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">
<title>Dynamically loading chart datasets</title>
<link rel="stylesheet" href="style.css"></head>
<body>
<script type="text/javascript" src="amcharts.js"></script>
<script type="text/javascript" src="serial.js"></script>
<script type="text/javascript" src="pie.js"></script>
<script type="text/javascript" src="none.js"></script>
<p class="selector">
<select onchange="setDataSet(this.options[this.selectedIndex].value);">
<option value="data1.json">Data Set #1</option>
<option value="data2.json">Data Set #2</option>
<option value="data3.json">Data Set #3</option>
</select> &lt; Select a data set
</p>
<div id="barchart"></div>
<div id="piechart"></div>
<script src='jquery-1.11.2.min.js'></script>
<script  src="index.js"></script>
</body>
</html>

如果还需要查看index.js代码进行任何更正/修正：

AmCharts.loadJSON = function(url) {
if (window.XMLHttpRequest) {
    var request = new XMLHttpRequest();
} else {
    var request = new ActiveXObject('Microsoft.XMLHTTP');
}
request.open('GET', url, false);
request.send();

  return eval(request.responseText);
};
var bar_chart = AmCharts.makeChart("barchart", {
"type": "serial",
"theme": "none",
"dataProvider": AmCharts.loadJSON('data1.json'),
"valueAxes": [{
"gridColor":"#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"      
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition":"start",
"tickLength":20
}
});
var pie_chart = AmCharts.makeChart("piechart", {
"type": "pie",
"theme": "light",
"dataProvider": AmCharts.loadJSON('data1.json'),
"valueField": "visits",
"titleField": "country",
"balloon":{
"fixedPosition":true
}
});
function setDataSet( dataset_url ) {
bar_chart.dataProvider = pie_chart.dataProvider =         
AmCharts.loadJSON(dataset_url);
bar_chart.validateData();
pie_chart.validateData();
}

通过下拉选择更改amcharts中的数据值

0 个答案: