higcharts左右两边坐标设置从0开始

如图怎么设置两边“0”坐标对齐:
图片描述

下图是想要实现的效果
图片描述

阅读 4k
2 个回答

右侧y轴含义是什么

调试页面: http://code.hcharts.cn/demos/...
栗子~

$(function() {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Column chart with negative values'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: [{
            labels: {
                formatter: function() {
                    if (this.value < 0) {
                        return "第一等级(" + this.value + ")";
                    } else if (this.value >= 0 && this.value <= 2) {
                        return "第二等级(" + this.value + ")";
                    } else {
                        return "第三等级(" + this.value + ")";
                    }
                }
            }
        },
        {
            opposite: true,
            labels: {
                formatter: function() {
                    if (this.value < 0) {
                        return "1级(" + this.value + ")";
                    } else if (this.value >= 0 && this.value <= 2) {
                        return "2级(" + this.value + ")";
                    } else {
                        return "3级(" + this.value + ")";
                    }
                }
            }
        }],
        credits: {
            enabled: false
        },
        series: [{
            name: 'John',
            yAxis: 0,
            data: [5, 3, 4, 7, 2]
        },
        {
            name: 'Jane',
            yAxis: 0,
            data: [2, -2, -3, 2, 1]
        },
        {
            name: 'Joe',
            yAxis: 1,
            data: [3, 4, 4, -2, 5]
        }]
    });
});

你的意思是总收入、净利润的单位不同,所以右边你就用%显示?

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Efficiency Optimization by Branch'
        },
        xAxis: {
            categories: [
                'Seattle HQ',
                'San Francisco',
                'Tokyo'
            ]
        },
        yAxis: [{
            min: -240,
            title: {
                text: 'Employees'
            }
        }, {
            title: {
                text: 'Profit (millions)'
            },
            opposite: true
        }],
        legend: {
            shadow: false
        },
        tooltip: {
            shared: true
        },
        plotOptions: {
            column: {
                grouping: false,
                shadow: false,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Employees',
            color: 'rgba(165,170,217,1)',
            data: [150, 73, 20],
            pointPadding: 0.3,
            pointPlacement: -0.2
        }, {
            name: 'Profit',
            color: 'rgba(248,161,63,1)',
            data: [-183.6, -178.8, 198.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.3,
            pointPlacement: 0.2,
            yAxis: 1
        }]
    });
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题