Highcharts-可调整大小的y轴作为烛台和体积图的一

仍然找不到解决方案,我不得不在这里发帖。

我有一个来自“ Highcharts”的烛台图和体积图。两者应在同一轴上。调整大小时,两者都应调整为一个。参见下图。

Highcharts-可调整大小的y轴作为烛台和体积图的一

当前,Highchart将其支持为两个窗格,对我来说这没有用。任何帮助将不胜感激。

Highcharts-可调整大小的y轴作为烛台和体积图的一

nn0930 回答:Highcharts-可调整大小的y轴作为烛台和体积图的一

调整大小适用于轴,并且可以将序列分配给任何轴,因此,如果在同一yAxis中具有多个序列,则调整大小将适用于该yAxis中的所有序列。

默认的演示数据量比OHLC数据大1 000 000,因此我在以下演示中进行了调整:https://jsfiddle.net/BlackLabel/oegqudbz/

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,// set the allowed units for data grouping
        groupingUnits = [[
            'week',// unit name
            [1]                             // allowed multiples
        ],[
            'month',[1,2,3,4,6]
        ]],i = 0;

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

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


    // create the chart
    Highcharts.stockChart('container',{

        rangeSelector: {
            selected: 1
        },title: {
            text: 'AAPL Historical'
        },yAxis: [{
            labels: {
                align: 'right',x: -3
            },title: {
                text: 'OHLC'
            },height: '60%',lineWidth: 2,resize: {
                enabled: true
            }
        },{
            labels: {
                align: 'right',title: {
                text: 'Volume'
            },top: '65%',height: '35%',offset: 0,lineWidth: 2
        }],tooltip: {
            split: true
        },series: [{
            type: 'candlestick',name: 'AAPL',data: ohlc,dataGrouping: {
                units: groupingUnits
            }
        },{
            type: 'column',name: 'Volume',data: volume,dataGrouping: {
                units: groupingUnits
            }
        }]
    });
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 600px; min-width: 310px"></div>

通过可拖动窗格模块可以更改多少个窗格(或yAxes)没有限制,因此您可以分配2个以上的轴和2个以上的缩放器,而将2个以上的轴分配给一个缩放器。 API参考中的更多信息: https://api.highcharts.com/highstock/yAxis.resize

本文链接:https://www.f2er.com/3158662.html

大家都在问