Highstock图表：多个x轴旋转视图

Question

我必须绘制一个具有以下内容的股票图表：

1. x轴上的日期
2. 带有折线图的Y轴上的价格，带有条形图的x轴上的数量。

但是我的图表看起来像

。

由于我是新来的，请帮助我。

提前感谢。

我的Jscode：

Highcharts.stockChart('chartOutput1', {
            chart: {
                type: 'line',
                width: 500,
                plotBackgroundColor: '#FCFFC5'
            },

            title: {
                text: 'Line Chart'
            },
            rangeSelector: {
                selected: 1
            },

            xAxis: [ {
                type: 'datetime',
                title : {
                    text : 'Date'
                },
                categories : date
            }],

            yAxis: [{
                labels: {
                    align: 'right',
                    x: -3
                },
                title: {
                    text: 'Price'
                },
                height: '60%',
                lineWidth: 2,
                resize:{enabled:true}
            },{
                labels: {
                    align: 'right',
                    x: -3
                },
                title: {
                    text: 'Quantity'
                },
                top: '65%',
                height: '35%',
                offset: 0,
                lineWidth:2
            } ],

            tooltip: {
                split: true,
                formatter: function() {
                  return '<strong>'+this.x+': </strong>'+ this.y;
                }
            },

            series: [{
                type: 'line',
                name: 'Price',
                data: price,
                /* dataGrouping: {
                    units: groupingUnits
                } */
            } ,{
                type: 'bar',
                name: 'quantity',
                data: quantity,
                yAxis: 1,
                /* dataGrouping: {
                    units: groupingUnits
                } */
            }]
        });

JS小提琴：https://jsfiddle.net/alitta/gdp98xq1/3/

Answer 1

这里是一个模板，您可以从以下位置开始：https://jsfiddle.net/BlackLabel/vp5k7zhb/。您需要做的就是以所需的方式准备和解析数据。

Highcharts.getJSON('https://www.highcharts.com/samples/data/aapl-ohlcv.json', function (data) {

    // split the data set into ohlc and volume
    var ohlc = [],
        volume = [],
        dataLength = data.length,
        i = 0;

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

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

    Highcharts.stockChart('container', {
       ...
    });
});