Question

我是javascript的新手，当用户点击下拉菜单时，需要一些帮助才能重新加载我的高保真。

这就是我所拥有的：

使用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>

按钮下拉菜单用于更新CHART：

<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将其他数据发送到chart1并更新页面？

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

使用json数据的子部分重新加载高图表

1 个答案: