Highstock - 使用 JSON 从数据库中获取两个数据并使用添加序列显示到图表中

Question

我正在尝试使用 Highstock 来显示此示例中的图表。 JS fiddle

我需要使用两个JSON 代码，因为我想在我的数据库中显示来自不同表的两个数据。 第一个数据是 OHLC 和体积。 OHLC 和音量显示在不同的yAxis 中，就像上面的示例一样。

第二个数据是高低预测，我想将它与 OHLC 一起显示在同一个 yAxis 中。虽然音量保持不变（显示在不同的yAxis 与 OHLC 和预测）。

这是迄今为止我尝试过的代码，但它只显示 OHLC 和 Volume。不知何故，未添加预测数据。我认为addSeries() 是问题所在。谁能帮帮我？

谢谢。

$.getJSON(url, function(data) {
    var ohlc = [];
    var volume = [];
    var dataLength = data.length;

    for (i = 0; i < dataLength; i++) {
        ohlc.push([
            data[i][0], // the date
            data[i][1],
            data[i][2],
            data[i][3],
            data[i][4] // open
        ]);

        volume.push([
            data[i][0], // the date
            data[i][5] // the volume
        ])
    }

    $('#container').highcharts('StockChart', {

        rangeSelector: {
            selected: 0,
        },

        title: {
            text: 'AAPL Historical'
        },

        yAxis: [{
            title: {
                text: 'OHLC'
            },
            height: 200,
            lineWidth: 2
        }, {
            title: {
                text: 'Volume'
            },
            top: 300,
            height: 100,
            offset: 0,
            lineWidth: 2
        }],

        series: [{
            type: 'candlestick',
            name: 'AAPL',
            data: ohlc,
        }, {
            type: 'column',
            name: 'Volume',
            data: volume,
            yAxis: 1,
        }]
    });
});

$.getJSON(urlprediction, function(data) {
    var forecast = [];
    var dataLength = data.length;

    for (i = 0; i < dataLength; i++) {
        forecast.push([
            data[i][0], // the date
            data[i][1],
            data[i][2], // open
        ])
    }

    var chart = $('#container').highcharts();
    chart.addSeries({
        type: 'arearange',
        name: 'ADBE',
        data: forecast,
    });
});

Answer 1

如果你第二次通过 JSON 获取数据，你不应该使用 var chart = $('#container').highcharts(); .我建议使用这种结构：

$.getJSON(url, function(data) {
var ohlc = [];
var volume = [];
var dataLength = data.length;

for (i = 0; i < dataLength; i++) {
    ohlc.push([
        data[i][0], // the date
        data[i][1],
        data[i][2],
        data[i][3],
        data[i][4] // open
    ]);

    volume.push([
        data[i][0], // the date
        data[i][5] // the volume
    ])
}

var chart = $('#container').highcharts('StockChart', {

    rangeSelector: {
        selected: 0,
    },

    title: {
        text: 'AAPL Historical'
    },

    yAxis: [{
        title: {
            text: 'OHLC'
        },
        height: 200,
        lineWidth: 2
    }, {
        title: {
            text: 'Volume'
        },
        top: 300,
        height: 100,
        offset: 0,
        lineWidth: 2
    }],

    series: [{
        type: 'candlestick',
        name: 'AAPL',
        data: ohlc,
    }, {
        type: 'column',
        name: 'Volume',
        data: volume,
        yAxis: 1,
    }]
},function(chart){
$.getJSON(urlprediction, function(data) {
    var forecast = [];
    var dataLength = data.length;

    for (i = 0; i < dataLength; i++) {
        forecast.push([
        data[i][0], // the date
        data[i][1],
        data[i][2], // open
        ])
    }

    chart.addSeries({
        type: 'arearange',
        name: 'ADBE',
        data: forecast,
    });
    });

});

});