在下拉列表中选择重新绘制AMChart

Question

从下拉列表中选择选项时，重绘折线图的最佳方法是什么？您可以看到我有3个变量与我的下拉列表中的3个选项匹配，但是当我选择其他选项时，我无法弄清楚如何更改dataProvider并重绘图表。

视图

<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");
});

Answer 1

尝试

$("#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(); 
});