javascript - 更改图表类型给出 : Uncaught TypeError: Cannot read property 'length' of undefined Highcharts

Question

我最初以烛台模式加载图表。

然后单击按钮将其更改为线路模式。

蜡烛图和折线图数据都有不同的数据点

candlestick = [[datetime, open, high, low, close], ....]
line = [[datetime, close], ....]

点击按钮

    if (requiredType == "candlestick") {
        chart.series[seriesindex].update({
            type: "candlestick",
            keys: ['x', 'open', 'high', 'low', 'close'],
            data: candlestick,
        }, true);

    } else if (requiredType == "line") {
        chart.series[seriesindex].update({
            type: "line",
            keys: ['x', 'y'],
            data: line,
        }, true);
    }

图表最初以烛台模式加载。单击更改类型按钮后，它会失败并给出以下错误。

Uncaught TypeError: Cannot read property 'length' of undefined
    at Object.high (highstock.src.js:47746)
    at v.ohlc (highstock.src.js:47764)
    at v.l (highstock.src.js:47865)
    at v.t.processData (highstock.src.js:48205)
    at v.F.processData (highstock.src.js:53103)
    at highstock.src.js:16601
    at Array.forEach (<anonymous>)
    at G.setTickInterval (highstock.src.js:16600)
    at G.setScale (highstock.src.js:16936)
    at highstock.src.js:24043
high    @   highstock.src.js:47746
ohlc    @   highstock.src.js:47764
l   @   highstock.src.js:47865
t.processData   @   highstock.src.js:48205
F.processData   @   highstock.src.js:53103
(anonymous) @   highstock.src.js:16601
setTickInterval @   highstock.src.js:16600
setScale    @   highstock.src.js:16936
(anonymous) @   highstock.src.js:24043
redraw  @   highstock.src.js:24041
update  @   highstock.src.js:34110
toggleChart @   fno.js:336
(anonymous) @   fno.js:907
dispatch    @   jquery.js:4435
r.handle    @   jquery.js:4121

但是，如果最初我以折线模式加载图表，然后切换到烛台模式，那么它不会失败，而是将图表留空而不绘制任何内容。

此外，如果我在图表上只有很少的点，例如 10 点，并且图表处于烛台模式，并且我将其切换到折线模式，那么它可以正常工作，但如果数据多于 500 点，则该模式将无法工作。

Answer 1

您还需要更新近似值，对于line系列和'ohlc'默认设置为'average' 适用于 ohlc 系列。

$('#line').on('click', function() {
    chart.series[0].update({
        type: 'line',
        dataGrouping: {
            approximation: 'average'
        },
        keys: ['x', 'y'],
        data: line
    });
});

$('#candlestick').on('click', function() {
    chart.series[0].update({
        type: 'candlestick',
        dataGrouping: {
            approximation: 'ohlc'
        },
        keys: ['x', 'open', 'high', 'low', 'close'],
        data: candlestick
    });
});

现场演示: http://jsfiddle.net/BlackLabel/qh7wLc94/

API引用: https://api.highcharts.com/highstock/series.ohlc.dataGrouping.approximation