Question

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

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

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

这是我到目前为止尝试的代码，但它只显示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,
    });
    });

});

}）;

Highstock - 使用JSON从数据库中获取两个数据，并使用addseries显示到Chart中

1 个答案: