Проблема с установкой двух осей y в Highcharts.js

Не могли бы вы взглянуть на эту демонстрацию и сообщить мне, почему я я также не могу установить другую сторону yAxis?

$(function () {
            $('#chart2').highcharts({
        chart: {
            type: 'column'
        },
         credits: {
            enabled: false
        },
            title: {
            text: 'The Chart Title Goes Here!',
              style: {
                color: '#5882FA',
                fontWeight: 'normal',
                fontSize: '11',
                marginBottom: '30'
            }
        },

        xAxis: {
            categories: ['Roads', 'Powerlines'],

        },
                  yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value}°C',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: 'Temperature',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: 'Rainfall',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                labels: {
                    format: '{value} mm',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                opposite: true
            }],
        legend: {
        enabled: false
    },
         tooltip: {
            formatter: function() {
                return this.x +
                    ' is <b>'+ this.y +'</b>';
            }
        },

        series: [{
            data: [{
                name: 'Roads',

                y: 200
            }, {
                name: 'Powerlines',
                color: '#FF00FF',
                y: 50
            }]
        }]
    });
});

Я нашел несколько примеров в API Highcharts и попытался следовать им в своей демонстрации, но они не сработали!

Highcharts: гистограмма с несколькими осями Y


javascript highcharts
person Suffii    schedule 03.07.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я исправил проблему с вашим кодом: DEMO

Вам нужно будет передать данные серии для каждой оси Y отдельно:

series: [{
            name: 'Rainfall',
            type: 'column',
            yAxis: 1,
            data: [49.9, 71.5],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Temperature',
            type: 'column',
            data: [7.0, 6.9],
            tooltip: {
                valueSuffix: ' °C'
            }
        }]
person Rahul Gupta    schedule 03.07.2014

arrow_upward
1
arrow_downward

Что ж, я думаю, тебе нужно починить свой объект series. Как насчет этого:

series : [{
        data : [{
                name : 'Roads',

                y : 200
            }, {
                name : 'Powerlines',
                color : '#FF00FF',
                y : 50
            }
        ]
    },
    {
        yAxis : 1,
        data : [{
                name : 'Roads',

                y : 30
            }, {
                name : 'Powerlines',
                color : '#FF00FF',
                y : 10
            }
        ]
    }
]

Также вам нужно добавить yAxis : 1 в качестве id к оси (вы можете явно установить < strong>id оси, чтобы убедиться)

person Andrey Borisko    schedule 03.07.2014