Графики 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', {
       ...
    });
});