javascript - Highchart datepicker范围选择器，可以动态选择要显示的数据

Question

我是 jquery 新手。我想将 highchart jquery 插件集成到我的网站中。我在 stackoverflow 中搜索了带有 CI 集成的 jquery，并找到了以下代码:

$(document).ready(function() {
        var a;
        options = {
        chart   : {renderTo: 'chart', type: 'line', marginRight: 130, marginBottom: 25},
        credits : {enabled: false},
        title   : {text: 'Sales Performance', x: -20},
        xAxis   : {categories: [{}]},
        yAxis   : {title: {text: '(IDR - millions)'}, plotLines: [{value: 0,width: 1,color: '#808080'}]},
        legend  : {layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0},
        tooltip : {
            valueDecimals: 2,
            formatter: function() {
                var s = '<b>'+ this.x +'</b>';
                $.each(this.points, function(i, point) {
                    s += '<br/>'+point.series.name+': '+point.y;
                });
                return s;
            },
            shared: true
        },
        <?php echo $series; ?> // resulted like this -> series: [{},{},{}.{}];
    };
    $.ajax({
        url : "generate_graph",
        type    : 'post',
        dataType: "json",
        success : function(data){ //to get data from multiple sales
            options.xAxis.categories = data.categories;
            for(a = 0; a < data.count; a++){
                options.series[a].name = data.name[a];
                options.series[a].data = data.value[a];
            }
            var chart = new Highcharts.Chart(options);          
        }
    });
})

我的问题是，如果我希望该图表能够识别输入，例如动态选择要显示的数据(可能不仅是销售业绩，还有利润)和范围选择器日期选择器，我该如何修改此代码？

Answer 1

您可以使用series.update()方法，它允许动态更改图表类型。 包含在(v3.0 highcharts)中。

chart.series[0].update({
                   data: [7.0, 6.9, 9.5, 14.5, 18.2, 16.0]
});

在这里试试:http://jsfiddle.net/ravi441988/8Sg8K/96/

下面 jsfiddle 上的其他演示显示了更新同一图表中的多行(即多个系列) http://jsfiddle.net/ravi441988/8Sg8K/97/

希望这对您有帮助。