在HighStock图表中是否可以有两个以上的窗格?

时间:2013-07-25 09:37:17

标签: highcharts highstock volumes panes

我希望能够绘制一个图表数据,该数据具有通常的Open High low和Close加上Volumes和Open Interest。这些将在3个窗格中表示: 窗格1:打开高低关闭 窗格2:卷 第3部分:未平仓合约。

来自HighCharts(highStock)的“两个窗格,烛台和卷”示例仅涉及窗格1和2.因此,问题是如果可能在“卷”窗格下绘制第三个窗格,我可以在其中打开我的开放兴趣栏? 感谢

2 个答案:

答案 0 :(得分:0)

是的,这是可能的 - 只需添加更多轴,就像你提到的例子一样。

答案 1 :(得分:0)

我也试图在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'                      
                }                

            }  
            ]


});

});