вы можете динамически построить свойство AmCharts "graphs"
в массиве,
, затем использовать массив в makeChart
, см. Следующий рабочий фрагмент, флажки
используются для переключения каждого графика /series.
диаграмма рисуется по событию 'change'
каждого флажка.
затем строятся "graphs"
с использованием hidden
на основе свойства флажка checked
.
window.addEventListener('load', function () {
// get checkboxes, add change event listener
var checkboxes = document.getElementsByName('graph');
Array.prototype.forEach.call(checkboxes, function(checkbox) {
checkbox.addEventListener('change', drawChart);
});
// draw chart
drawChart();
function drawChart() {
// build graphs
var graphs = [];
Array.prototype.forEach.call(checkboxes, function(checkbox) {
graphs.push({
"type": "line",
"title": checkbox.value,
"valueField": checkbox.value,
hidden: !checkbox.checked
});
});
// make chart
var chart = AmCharts.makeChart("chart_div", {
"type": "serial",
"theme": "light",
"dataProvider": [
{"Date":"1/1/2017","Index I":13.80,"Index II":11.27,"Index III":8.75,"Index IV":12.30,"Index V":10.60,"Index VI":14.42},
{"Date":"2/1/2017","Index I":15.49,"Index II":14.05,"Index III":6.26,"Index IV":13.37,"Index V":9.25,"Index VI":18.92},
{"Date":"3/1/2017","Index I":16.51,"Index II":18.77,"Index III":3.22,"Index IV":18.02,"Index V":11.02,"Index VI":24.78},
{"Date":"4/1/2017","Index I":20.36,"Index II":22.35,"Index III":4.74,"Index IV":22.93,"Index V":7.69,"Index VI":20.99},
{"Date":"5/1/2017","Index I":25.64,"Index II":24.02,"Index III":1.09,"Index IV":19.08,"Index V":13.39,"Index VI":25.43},
{"Date":"6/1/2017","Index I":22.21,"Index II":21.83,"Index III":6.15,"Index IV":23.07,"Index V":16.72,"Index VI":23.14},
{"Date":"7/1/2017","Index I":18.81,"Index II":23.23,"Index III":5.21,"Index IV":19.67,"Index V":13.97,"Index VI":25.71},
{"Date":"8/1/2017","Index I":21.98,"Index II":19.23,"Index III":11.10,"Index IV":17.73,"Index V":14.70,"Index VI":31.29},
{"Date":"9/1/2017","Index I":18.10,"Index II":25.12,"Index III":7.33,"Index IV":19.89,"Index V":20.07,"Index VI":36.57},
{"Date":"10/1/2017","Index I":18.30,"Index II":25.56,"Index III":13.22,"Index IV":17.05,"Index V":16.68,"Index VI":39.10},
{"Date":"11/1/2017","Index I":22.17,"Index II":25.02,"Index III":16.85,"Index IV":15.03,"Index V":19.65,"Index VI":43.62},
{"Date":"12/1/2017","Index I":22.74,"Index II":25.02,"Index III":18.35,"Index IV":12.48,"Index V":24.32,"Index VI":43.62}
],
"graphs": graphs, // <-- add graphs array here
"categoryField": "Date",
"legend": {}
});
}
});
label {
cursor: pointer;
}
.select {
white-space: nowrap
}
#chart_div {
height: 260px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div>Select Graphs</div>
<div class="select">
<input type="checkbox" name="graph" id="graph-0" value="Index I" checked />
<label for="graph-0">Index I</label>
<span>|</span>
<input type="checkbox" name="graph" id="graph-1" value="Index II" checked />
<label for="graph-1">Index II</label>
<span>|</span>
<input type="checkbox" name="graph" id="graph-2" value="Index III" checked />
<label for="graph-2">Index III</label>
<span>|</span>
<input type="checkbox" name="graph" id="graph-3" value="Index IV" />
<label for="graph-3">Index IV</label>
<span>|</span>
<input type="checkbox" name="graph" id="graph-4" value="Index V" checked />
<label for="graph-4">Index V</label>
<span>|</span>
<input type="checkbox" name="graph" id="graph-5" value="Index VI" />
<label for="graph-5">Index VI</label>
</div>
<div id="chart_div"></div>