重新绘制AMChart上的下拉选择

ReDraw AMChart on dropdown select

本文关键字:选择 AMChart 新绘制 绘制      更新时间:2023-09-26

当从下拉菜单中选择一个选项时,重新绘制线形图的最佳方法是什么?你可以看到我有3个变量匹配到我的下拉菜单中的3个选项,但我不知道如何改变dataProvider和重新绘制图表时,我选择了一个不同的选项。

<<h3>视图/h3>
<select id="selectAccountSelect" class="form-control">
      <option id="1" selected="selected" value="1">Account 1</option>
      <option id="2" value="2">Account 2</option>
      <option id="3" value="3">Account 3</option>
</select>

JS

var account1 = [
{
    "date": "2014-01-01",
    "acc1": 80,
    "acc2": 40
},
{
    "date": "2014-02-01",
    "acc1": 72,
    "acc2": 20
},
{
    "date": "2014-03-01",
    "acc1": 80,
    "acc2": 30
},
{
    "date": "2014-06-01",
    "acc1": 20,
    "acc2": 80
}
];
var account2 = [
{
    "date": "2014-02-01",
    "acc1": 54,
    "acc2": 20
},
{
    "date": "2014-04-01",
    "acc1": 60,
    "acc2": 60
},
{
    "date": "2014-05-01",
    "acc1": 50,
    "acc2": 40
},
{
    "date": "2014-06-01",
    "acc1": 18,
    "acc2": 56
}
];
var account3 = [
{
    "date": "2014-01-01",
    "acc1": 40,
    "acc2": 20
},
{
    "date": "2014-02-01",
    "acc1": 35,
    "acc2": 20
},
{
    "date": "2014-03-01",
    "acc1": 60,
    "acc2": 40
},
{
    "date": "2014-04-01",
    "acc1": 50,
    "acc2": 30
},
{
    "date": "2014-05-01",
    "acc1": 25,
    "acc2": 50
},
{
    "date": "2014-06-01",
    "acc1": 25,
    "acc2": 60
}
];
AmCharts.ready(function () {
    var chart = new AmCharts.AmSerialChart();
    chart.dataProvider = account1; //Change this variable
    chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
    chart.categoryField = "date";
    chart.dataDateFormat = "YYYY-MM-DD";
    chart.autoMargins = false;
    chart.marginRight = 0;
    chart.marginLeft = 30;
    chart.marginBottom = 20;
    chart.marginTop = 20;
    var categoryAxis = chart.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
    categoryAxis.minPeriod = "MM"; // our data is daily, so we set minPeriod to DD
    categoryAxis.inside = false;
    categoryAxis.gridAlpha = 0;
    categoryAxis.tickLength = 0;
    categoryAxis.axisAlpha = 0;
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.dashLength = 1;
    valueAxis.axisColor = "#DADADA";
    valueAxis.axisAlpha = 1;
    chart.addValueAxis(valueAxis);
    var graph = new AmCharts.AmGraph();
    graph.type = "line";
    graph.valueField = "acc1";
    graph.lineColor = "#60c6cf";
    graph.lineThickness = 3;
    graph.bullet = "round";
    graph.bulletColor = "#60c6cf";
    graph.bulletBorderColor = "#ffffff";
    graph.bulletBorderAlpha = 1;
    graph.bulletBorderThickness = 3;
    graph.bulletSize = 12;
    chart.addGraph(graph);
    var graph1 = new AmCharts.AmGraph();
    graph1.type = "line";
    graph1.valueField = "acc2";
    graph1.lineColor = "#f35958";
    graph1.lineThickness = 3;
    graph1.bullet = "round";
    graph1.bulletColor = "#f35958";
    graph1.bulletBorderColor = "#ffffff";
    graph1.bulletBorderAlpha = 1;
    graph1.bulletBorderThickness = 3;
    graph1.bulletSize = 12;
    chart.addGraph(graph1);
    var chartCursor = new AmCharts.ChartCursor();
    chart.addChartCursor(chartCursor);
    chart.write("chartdiv");
});

Try

$("#selectAccountSelect").change(function() {
    var selectedVal = $(this).val();
    var dataProvider = null;
    switch(selectedVal) {
       case 1:
         dataProvider = account1;
         break;
       case 2:
         dataProvider = account2;
         break;
       case 3:
         dataProvider = account3;
         break;
       default:
         // do something for default case
         break;
    }
    chart.dataProvider = dataProvider;
    chart.validateData(); 
});