Javascript 将数据值附加到Highcharts中

因此，我得到的是一个Highchart，其中数据值在单击后更新，如下所示：

但是，正如您所看到的，单击按钮后，第二个数据值再次从0开始。我想要的是与第一个数据一起附加的第二个数据。因此，第二组数据应该从第12点开始。我希望图表数据是连续的

本例使用Highcharts中的

setData

功能

$('#button').click(function () {
    chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]);
});

我还使用了

push

和

append

，但它在Highcharts中抛出了一个错误

$('#button').click(function () {
    chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]);
});

有没有办法做到这一点

任何帮助都将不胜感激

您可以使用该方法。试试这个，也许这对你有帮助

它会在渲染时间之后向序列添加一个点。该点可以在末尾加上，或者给它一个X值，直到该系列的开始或中间。

$('#button').click(function () {

     //chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]);
     let newList = [129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4];
     newList.map(i => chart.series[0].addPoint(i));       

 });

你可以使用这个方法。试试这个，也许这对你有帮助

它会在渲染时间之后向序列添加一个点。该点可以在末尾加上，或者给它一个X值，直到该系列的开始或中间。

$('#button').click(function () {

     //chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]);
     let newList = [129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4];
     newList.map(i => chart.series[0].addPoint(i));       

 });

---

您可以对合并的数组使用

setData

方法：

const data = [...];

var chart = Highcharts.chart('container', {
    series: [{
        data: data
    }]
});

$('#button').click(function() {
    const newData = [...];
    chart.series[0].setData(data.concat(newData));
});

现场演示：

---

或者使用

addPoint

方法，但出于性能原因，

redraw

参数设置为

false

const data = [...];

var chart = Highcharts.chart('container', {
    series: [{
        data: data
    }]
});


// the button action
$('#button').click(function() {
    const newData = [...];

    newData.forEach((el) => {
        chart.series[0].addPoint(el, false);
    });

    chart.redraw();
});

现场演示：

---

API参考：

您可以对合并的数组使用

setData

方法：

const data = [...];

var chart = Highcharts.chart('container', {
    series: [{
        data: data
    }]
});

$('#button').click(function() {
    const newData = [...];
    chart.series[0].setData(data.concat(newData));
});

现场演示：

---

或者使用

addPoint

方法，但出于性能原因，

redraw

参数设置为

false

const data = [...];

var chart = Highcharts.chart('container', {
    series: [{
        data: data
    }]
});


// the button action
$('#button').click(function() {
    const newData = [...];

    newData.forEach((el) => {
        chart.series[0].addPoint(el, false);
    });

    chart.redraw();
});

现场演示：

---

API参考：

您需要保存到变量中，然后需要循环使用它

在这里，我为您做了更改。如果您还有任何疑问，请检查并告诉我

var chart = Highcharts.chart('container', {
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});


// the button action
var numbersToAdd= [129.2,144.0,176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4];

$('#button').click(function () {

    jQuery.each(numbersToAdd, function(index, item) {
        chart.series[0].addPoint(item);
        })
});

---

您需要保存到变量中，然后需要在其中循环

在这里，我为您做了更改。如果您还有任何疑问，请检查并告诉我

var chart = Highcharts.chart('container', {
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});


// the button action
var numbersToAdd= [129.2,144.0,176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4];

$('#button').click(function () {

    jQuery.each(numbersToAdd, function(index, item) {
        chart.series[0].addPoint(item);
        })
});