highcharts - HighStock 图表中是否可以有两个以上的窗格？

Question

我希望能够绘制一个图表数据，该数据具有通常的开盘高低和收盘价以及交易量和未平仓量。这些将在 3 个窗格中表示： 窗格 1：开高低 关闭窗格 2：卷 窗格 3：未平仓合约。

HighCharts (highStock) 中的“两个窗格、烛台和交易量”示例仅处理窗格 1 和 2。所以问题是是否可以在“交易量”窗格下绘制第三个窗格，我可以在其中拥有未平仓合约栏？谢谢

Answer 1

是的，这是可能的 - 只需像您提到的示例中那样添加更多轴。

Answer 2

我也试图在 highstock 中有 3 个或更多窗格，但面临滚动条问题。滚动条仅与第一个图表同步，与两个图表的其余部分不同步。代码如下：

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



        rangeSelector : {
                buttons : [],
                inputEnabled : false
            },credits : {
                enabled : false
            },tooltip: {
                formatter: function () {
                        var series = this.series;
                        if(null != series){
                            if(null != this.point.custom){
                                return Highcharts.dateFormat('%A %b %d %H:%M:%S',
                                        new Date(this.x)) + '<br> ' + "<b> Alarm Criticality : </b>" +this.point.custom;
                            }                   

                            return Highcharts.dateFormat('%A %b %d %H:%M:%S',
                                    new Date(this.x)) + '<br> ' + "<b> Severity : </b>" +this.y;                        
                        }else {
                            return Highcharts.dateFormat('%A %b %d %H:%M:%S',
                                    new Date(this.x)) + '<br> ' + "<b> Health : </b>" +this.y;      
                        }
                    }
                },

            yAxis: [
                  {
                    opposite : false,
                    min: 10,                       
                    labels: {
                         enabled: false
                     },
                    title: {
                        text: 'Alarm'
                    },
                    top: 0,
                    height: '25%',
                    offset: 0,
                    lineWidth: 2
                },{
                    opposite : false,
                    min: 0,
                    //max: 100,
                    labels: {
                        align: 'left',
                        x: -5
                    },
                    title: {
                        text: 'Health'
                    },
                    top: '15%',
                    height: '25%',
                    offset: 0,
                    lineWidth: 2
                },{
                    opposite : false,
                    min: 0,
                    max:10,
                    labels: {
                        align: 'left',
                        x: -5
                    },
                    title: {
                        text: 'Anomaly Score'
                    },
                    top: '50%',
                    height: '25%',
                    offset: 0,
                    lineWidth: 2
                }
            ],

            series: [
               {
                type: 'scatter',
                name: 'Alarm',
                cursor: 'pointer',
                id: 'alarm',
                data: data :[someData],
                 turboThreshold: 3600,
                yAxis: 0                        

            },{
                name : 'Health',
                data :[someData], 
                yAxis: 1,
                type : 'areaspline',
                id: "health",
                fillColor : {
                    linearGradient : {
                        x1 : 0,
                        y1 : 0,
                        x2 : 0,
                        y2 : 1
                    },
                    stops : [
                            [
                                    0, Highcharts.getOptions().colors[ 0 ]
                            ], [
                                    1, Highcharts.Color( Highcharts.getOptions().colors[ 0 ] ).setOpacity( 0 ).get( 'rgba' )
                            ]
                    ]
                }
            },{
                type: 'scatter',
                name: 'Anomaly Score',
                data: data :[someData],
                yAxis: 2,
                id : 'anomalies',
                lineWidth : 0,
                marker : {
                    enabled : true,
                    radius : 4, 
                    symbol: 'circle',
                    fillColor:'#8EBCEB'                      
                }                

            }  
            ]


});

});