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/

希望这会对你有所帮助。

Answer 2

Javascript：

$(document).ready(function() {
    var a;
    options = {
        chart   : {renderTo: 'chart', type: 'line', marginRight: 130, marginBottom: 25},
        credits : {enabled: false},
        title   : {x: -20},
        xAxis   : {categories: [{}]},
        rangeSelector: {inputDateFormat: '%y-%m-%e'},
        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 if($ty == '1' || $ty == '2')
        { 
            echo $series;
        } 
        else { ?>
            series: [{}]
        <?php } ?>
    };

    //initial
    $.ajax({
        url     : "generate_graph",
        type    : 'post',
        dataType: "json",
        success : function(data){
            options.xAxis.categories    = data.categories;
            options.title.text          = data.title;
            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);          
        }
    });
})

$(function() {
    var dates = $('#from, #to').datepicker({
        onSelect: function(selectedDate) {
            var option = this.id =='from'?'minDate':'maxDate',
            instance = $(this).data('datepicker'),
            date = $.datepicker.parseDate(
                instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
                selectedDate,
                instance.settings
            );
            dates.not( this ).datepicker('option',option,date);

            // validate if we have both dates and get new series from server
            if ($(dates[0]).datepicker('getDate') && $(dates[1]).datepicker('getDate')) {
                var from = $(dates[0]).datepicker("getDate");
                var to =   $(dates[1]).datepicker("getDate");
                $.ajax({
                    url: 'generate_graph',
                    data: {
                        'from'  : from.getFullYear() + "-" + ("0" + (from.getMonth()+1)).slice(-2) + "-" + ("0" + from.getDate()).slice(-2), 
                        'to'    : to.getFullYear() + "-" + ("0" + (to.getMonth()+1)).slice(-2) + "-" + ("0" + to.getDate()).slice(-2),
                        'data'  : $('select[name="data"]').val()
                        },
                    type: 'post',
                    dataType: 'json',
                    success: function(data){
                        options.xAxis.categories    = data.categories;
                        options.title.text          = data.title;
                        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);  
                    }
                });
            }
        }
    });
});

HTML：

<div>
                <label for="from">Select Data</label>
                <select name="data">
                    <option value="Sales Revenue">Sales Revenue</option>
                    <option value="Actual Profit">Actual Profit</option>
                </select>
                <label for="from">From</label>
                <input type="text" id="from" name="from" size="15"/>
                <label for="to">to</label>
                <input type="text" id="to" name="to" size="15"/>
            </div>
            <div id="chart"></div>

我不知道它是如何工作的，但确实如此！感谢 Ravi 帮助我，还有Highchart datepicker