Можно ли иметь более двух панелей на графике HighStock?

Question

Я хотел бы иметь возможность построить данные графика, которые имеют обычный минимум открытия и закрытия плюс объемы и открытый интерес. Они должны быть представлены в 3-х панелях: Панель 1: Открыть Высокий Низкий Закрыть Панель 2: Панель Объемов 3: Открытый интерес.

Пример "Две панели, подсвечники и объемы" из HighCharts (highStock) имеет дело только с панелями 1 и 2. Так что вопрос в том, можно ли построить третью панель под панелью "Объемы", где я могу иметь свои открытые бары интереса? Спасибо

Answer 1

Да, это возможно - просто добавьте больше осей, как в примере, который вы упомянули.

Answer 2

Я также пытаюсь иметь 3 или более панели в highstock, но сталкиваюсь с проблемой с полосой прокрутки. Полоса прокрутки синхронизируется только с первым графиком и не синхронизируется с остальными двумя графиками. Код как ниже:

$(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'                      
                }                

            }  
            ]


});

});