Highcharts:如何使用setData添加系列。

时间:2022-12-03 17:56:26

I have a bubble chart that works with a jQuery UI slider to change the contents of the graph. ("through time") However, the bubbles on the chart can fall in and out of the chart by week, and when updating with setData, it ignores any new series that weren't there initially. My code:

我有一个气泡图,它与一个jQuery UI滑块一起工作,以改变图形的内容。然而,图表上的气泡会在一周内从图表中掉出来,当用setData更新时,它会忽略最初没有出现的任何新系列。我的代码:

series: [{ name: 'hidden',showInLegend: false, enableMouseTracking: false, marker: { lineColor:'rgba(255,255,255,0)', fillColor: 'rgba(255,255,255,0)', fillOpacity: 0 },
                   data: [{x:0,y:0,z:0, zz:0}]

        },{ name: 'bubble 2',showInLegend: false,
                   marker: { lineColor:'black', fillColor: { radialGradient: {cx: 0.4,cy: 0.3,r: 0.7}, stops: [ [0, 'green'], [1, 'white'] ] } },
                   data: [{x:11,y:10,z:5, zz:0}]

        },{ name: 'bubble 3',showInLegend: false,
                   marker: { lineColor:'black', fillColor: { radialGradient: {cx: 0.4,cy: 0.3,r: 0.7}, stops: [ [0, 'red'], [1, 'white'] ] } },
                   data: [{x:100,y:100,z:77, zz:0}]
        }]

If I put in setData like:

如果我输入setData,比如:

newSeries[0] = [{x:0,y:0,z:0.0000000000},
{x:9,y:13,z:1,name: 'hello', marker: { fillColor: { radialGradient: {cx: 0.4,cy: 0.3,r: 0.7}, stops: [ [0, 'green'], [1, 'white'] ] } }},
{x:23,y:23,z:6,name: 'hello2', marker: { fillColor: { radialGradient: {cx: 0.4,cy: 0.3,r: 0.7}, stops: [ [0, 'green'], [1, 'white'] ] } }},
{x:23,y:49,z:6,name: 'hello3', marker: { fillColor: { radialGradient: {cx: 0.4,cy: 0.3,r: 0.7}, stops: [ [0, 'green'], [1, 'white'] ] } }},
{x:24,y:24,z:2,name: 'hello4', marker: { fillColor: { radialGradient: {cx: 0.4,cy: 0.3,r: 0.7}, stops: [ [0, 'green'], [1, 'white'] ] } }}];

hello3 and hello4 are completely ignored. You can see a fiddle here, not of my chart but one which will demonstrate the issue: http://jsfiddle.net/ruchitrami/YUa3R/1/

hello3和hello4完全被忽略。您可以在这里看到一个小提琴,而不是我的图表,但它将展示这个问题:http://jsfiddle.net/ruchitrami/YUa3R/1/。

If you add chart.series[3].setData([4, 4, 4, 3, 3]); to that chart's button, it's ignored.

如果您添加chart.series[3]。setData([4, 4, 4, 3, 3]);对于这个图表的按钮,它被忽略了。

We need to use separate series because using one series and updating the data is not flexible enough to allow change via setData. We need to change the color of the bubbles in the chart by week, for example. There is only one data point per series.

我们需要使用单独的系列,因为使用一个系列和更新数据是不够灵活的,从而允许通过setData进行更改。例如,我们需要在一周内改变图表中气泡的颜色。每个系列只有一个数据点。

If I manually add in some "dummy" series to the initial call, it works perfectly. I just need Highcharts to accept these series without me needing to declare them. (as the bubbles drop in/out by week) Also, I'm not sure why the setData won't accept my "hello1, hello2" names on the new series... if anyone knows that.

如果我在最初的调用中手动添加一些“虚拟”系列,那么它的效果非常好。我只是需要Highcharts来接受这些系列,而不需要我声明它们。同时,我也不确定为什么setData不会接受新系列的“hello1, hello2”。如果有人知道。

1 个解决方案

#1


4  

That is because it is trying to set the data of a series that does not exist. You get this error if you add that setData line:

这是因为它试图设置一个不存在的系列的数据。如果添加setData行,会得到这个错误:

Uncaught TypeError: Cannot read property 'setData' of undefined

未捕获的类型错误:无法读取未定义的属性“setData”。

Instead you want to add the new series via chart.addSeries():

相反,您希望通过chart.addSeries()添加新的系列:

$('#button').click(function () {
        chart.series[0].setData([10, 10, 10, 10, 10],false);
        chart.series[1].setData([5, 5, 5, 5, 5],false);
        chart.series[2].setData([4, 4, 4, 4, 4],false);
        chart.addSeries({
            data: [4, 4, 4, 3, 3]
        });
    });
});

#1


4  

That is because it is trying to set the data of a series that does not exist. You get this error if you add that setData line:

这是因为它试图设置一个不存在的系列的数据。如果添加setData行,会得到这个错误:

Uncaught TypeError: Cannot read property 'setData' of undefined

未捕获的类型错误:无法读取未定义的属性“setData”。

Instead you want to add the new series via chart.addSeries():

相反,您希望通过chart.addSeries()添加新的系列:

$('#button').click(function () {
        chart.series[0].setData([10, 10, 10, 10, 10],false);
        chart.series[1].setData([5, 5, 5, 5, 5],false);
        chart.series[2].setData([4, 4, 4, 4, 4],false);
        chart.addSeries({
            data: [4, 4, 4, 3, 3]
        });
    });
});