Пример модификации Highcharts

Question

Ниже приведена ссылка на пример Highcharts, который я хочу изменить. Я хотел бы, чтобы правильные 2 оси Y стали одним. В настоящее время каждая линия на графике соответствует одной оси Y, потому что они имеют разные масштабы. Диаграмма, которую я хочу создать, будет иметь 1 правую ось, но будет соответствовать наименьшему и наивысшему экстремуму обеих линий на графике. Например, если строка A имеет низкое значение 5 (и ниже, чем любое значение в строке B), а строка B имеет экстремальное значение 90 (и выше, чем любое значение в A), эти 2 значения используются для оси. Две линии на графике должны соответствовать одной шкале.

Ссылка: http://www.highcharts.com/demo/combo-multi-axes

Код Curernt:

var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                    },
                    title: {
                        text: 'Example 1'
                    },
                    xAxis: [{
                        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    }],
                    yAxis: [{ // Primary yAxis
                        labels: {
                            formatter: function() {
                                return this.value +'%';
                            },
                            style: {
                                color: '#89A54E'
                            }
                        },
                        title: {
                            text: 'Percent Change',
                            style: {
                                color: '#89A54E'
                            }
                        },
                        opposite: true

                    }, { // Secondary yAxis
                        gridLineWidth: 0,
                        title: {
                            text: 'Measure',
                            style: {
                                color: '#4572A7'
                            }
                        },
                        labels: {
                            formatter: function() {
                                return this.value + 'k';
                            },
                            style: {
                                color: '#4572A7'
                            }
                        }
                    }, { // Tertiary yAxis
                        gridLineWidth: 0,
                        title: {
                            text: '',
                            style: {
                                color: '#AA4643'
                            }
                        },
                        labels: {
                            formatter: function() {
                                return this.value +' %';
                            },
                            style: {
                                color: '#AA4643'
                            }
                        },
                        opposite: true
                    }],

                series: [{
                    name: 'Measures',  //Button on Graph -- Measures
                    color: '#363534',
                    type: 'column',
                    yAxis: 1,
                    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            }, {
                    name: 'Percentage Change 1', //Button on Graph -- Purple
                    type: 'spline',
                    color: '#E17000',
                    yAxis: 2,
                    data: [30,40,35,25,14,25,39,28,21,78,23,36,5],
                    marker: {
                        enabled: false
            },
                    dashStyle: 'shortdot'
            }, {
                     name: 'Percentage Change 2', //Button on Graph -- Orange
                     color: '#A31A7E',
                     type: 'spline',
                     data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 35],
            }]
                });
            });

Answer 1

Существует возможность установить свойство yAxis для массива серий. Сделайте yAxis: 0 для обоих объектов серии. Это должно дать одну ось Y независимо от количества элементов серии на графике.

Answer 2

1. Во-первых, возможно, рассмотрим другой способ представления данных. Несколько шкал могут быть психическим напряжением.

2. Во-вторых, может это поможет? Я удалил $(document).ready... упаковщик.

             var chart;
   
           chart = new Highcharts.Chart({
               chart: {
                   renderTo: 'container',
               },
               title: {
                   text: 'Example 1'
               },
               xAxis: [{
                   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
               }],
               yAxis: [{ // Primary yAxis
                   labels: {
                       formatter: function() {
                           return this.value +'%';
                       },
                       style: {
                           color: '#878787'
                       }
                   },
                   title: {
                       text: 'Percent Change',
                       style: {
                           color: '#878787'
                       }
                   },
                   opposite: true
   
               }, { // Secondary yAxis
                   gridLineWidth: 0,
                   title: {
                       text: 'Measure',
                       style: {
                           color: '#4572A7'
                       }
                   },
                   labels: {
                       formatter: function() {
                           return this.value + 'k';
                       },
                       style: {
                           color: '#4572A7'
                       }
                   }
               }],
           series: [{
               name: 'Measures',  //Button on Graph -- Measures
               color: '#363534',
               type: 'column',
               yAxis: 1,
               data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
       }, {
               name: 'Percentage Change 1', //Button on Graph -- Purple
               type: 'spline',
               color: '#E17000',
               data: [30,40,35,25,14,25,39,28,21,78,23,36,5],
               marker: {
                   enabled: false
       },
               dashStyle: 'shortdot'
       }, {
                name: 'Percentage Change 2', //Button on Graph -- Orange
                color: '#A31A7E',
           type: 'spline',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 35],
   }]  });