重新加载高图表与json数据的分段

Re-loading high charts with subsection of json data

本文关键字：json 数据分段高图表新加载加载更新时间：2023-09-26

我是javascript新手，当用户点击下拉菜单时，需要一些帮助来重新加载我的highchart

我有:

Javascript:

$(function() {
    $.getJSON('cgi-bin/fakedata.js', function(main) {

    var chart1 = new Highcharts.Chart({
        chart : { 
             backgroundColor: 'black',
             renderTo: 'chart1'
        },
        title: {
            text: 'DI Status Report',
            x: -20 //center
        },
        xAxis: {
            categories: getDates(main)
        },
        yAxis: {
            min: 0,
            max: 100,
            title: {
                text: 'Completion'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            backgroundColor: '#282828',
            valueSuffix: '%'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Reel 1',
            data: [5,30,50]
        }, {
            name: 'Reel 2',
            data: [10,20,30]
        }, {
            name: 'Reel 3',
            data: [40,60,100]
        }, {
            name: 'Reel 4',
            data: [40,50,55]
        }]
    });
    });
});

HTML:

<div class="well col-md-7" id="chart1" style="min-width: 210px; height: 300px; margin: 0 auto; float: left; background-color: black"></div>

按钮下拉菜单用于更新图表:

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a style="color: grey" onClick="updateData()" data-value="2015-10-08">2015-10-08</a></li>
    <li><a style="color: grey" onClick="updateData()" data-value="2015-10-01">2015-10-01</a></li>
    <li><a style="color: grey" onClick="updateData()" data-value="2015-09-28">2015-09-28</a></li>

Javascript用于更新图表:

function updateData() {
...

我将如何使用ajax发送额外的数据到图表1和更新页面?

您可以使用setData()来更新图表的数据，如下所示:

function updateData() {
    // get the data via ajax
    var data1, data2, data3, data4;
    var chart = $('#chart1').highcharts();
    chart.series[0].setData(data1);
    chart.series[1].setData(data2);
    chart.series[2].setData(data3);
    chart.series[3].setData(data4);
}