Question

我使用highcharts显示每日统计信息，我希望用户能够选择日期范围。

function requestData(chart, from, to, group) {
    $.ajax({
        url: '/stats/chart?from='+from+'&to='+to+'&group='+group,
        success: function(data) {
            chart.series[0].setData(data.data);
            chart.series[0].pointStart = data.start;
            chart.series[0].pointInterval = data.interval;
        },
        cache: false
    });
}

js函数执行ajax调用并返回类似于： -

的内容

{
"start":1358467200000,
"interval":86400000,
"data":[24,9,46,66,19,93,11,10,66,75,70,52,35,91,69,0,50,24,5,14,83,9,26,5,53,32,27,30,34,25,57,100]
}

如何更新图表pointStart和pointInterval值？

Answer 1

从Highcharts 3开始，您可以使用series.update()：

chart.series[0].update({
    pointStart: data.start
    pointInterval: data.interval,
    data: data.data
}, false); // true if you want redraw

Answer 2

我编辑了原始问题，以显示解释问题的jsFiddle示例，但我已经提供了一个可行的解决方案。

使用我的解决方案，图表不必完全重新初始化，但删除所有系列，然后通过Chart.addSeries()方法添加新系列。我觉得Series.setData()会更有效率，但我无法弄清楚如何让它发挥作用 - 也许会有人在那里！

我目前的解决方案（糟透了）：jsFiddle solution

因此，在对原始海报的回答中，您必须按照@ jacobdalton的回答说明，更改json对象以匹配options对象的形式，然后将这些对象提供给{ {1}}功能。

此外，您可能会注意到Chart.setData()参数false和Series.remove(false) - 这些参数确保每次调用时都不会重新呈现图表，并且{{1}之后可以调用以节省处理。

Answer 3

chart.series[0]没有可编辑的pointStart或pointInterval属性。您需要通过动态方法（如chart.series[0].setData()）分配这些内容并创建一个完整的options对象（此时您只发送值data.data，这是函数的可接受参数，但它也可以使用对象 - check out the docs for setData()和series options）。

我建议更改你的json对象以匹配options对象的形式：

{
    "pointStart":1358467200000,
    "pointInterval":86400000,
    "data":[24,9,46,66,19,93,11,10,66,75,70,52,35,91,69,0,50,24,5,14,83,9,26,5,53,32,27,30,34,25,57,100]
}

然后将json对象直接发送到chart.series[0].setData(data)。

动态更新pointStart和pointInterval

3 个答案: