在Highcharts.js中设置两个y轴的问题

Issue on Setting Two yAxis in Highcharts.js

本文关键字：两个 问题 js Highcharts 设置      更新时间：2023-09-26

你能看一下这个演示并告诉我为什么我不能设置另一边的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
            }]
        }]
    });
});

我在Highcharts API上找到了一些样本，我试图在我的演示中遵循它们，但它们不起作用!

Highcharts:带多个y轴的条形图

我已经纠正了你的代码的问题: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'
            }
        }]

嗯，我认为你需要修复你的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(您可以显式设置轴的id以确保)

相关文章：