如何强制Highcharts中的多个y轴具有公共零

Question

看到这个JSFiddle.如何使y轴零对齐？

Answer 1

简短的回答是:你做不到.

您可以调整轴缩放,填充和刻度位置等,并可能得到您想要的,但没有设置来完成此任务.

但是有一个功能请求,您可以将您的投票和/或评论添加到:

http://highcharts.uservoice.com/forums/55896-general/suggestions/2554384-multiple-axis-alignment-control

编辑:OTOH,我不得不提到像这样的双轴图表通常是一种非常差的显示数据的方式,并邀请用户进行无效的比较.

虽然大多数人总是试图将所有内容放在一个图表中,但多个图表通常是更好的解决方案.

FWIW

Answer 2

你可以设置第一个yAxis的最小/最大值,并使用linkedTo到第二个轴,但我不确定你是否期望这个效果:

http://jsfiddle.net/qkDXv/2/

yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: '#89A54E'
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: '#89A54E'
                }
            },
            min:-250,
            max:50
            //linkedTo:1
        }, { // Secondary yAxis
            title: {
                text: 'Rainfall',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: '#4572A7'
                }
            },
            opposite: true,
            linkedTo:0
        }],

Answer 3

在添加此功能之前,一个简单的解决方法是确保两个轴的最大/最小比率相同.例如,主y轴的最小值和最大值例如为-20和40,则最大/最小比率为-2.现在假设我们的辅助y轴的最大值为25.如果我们将该轴的min设置为25/-2(= -12.5),那么y = 0线将对齐两个轴.

虽然有一个标志自动设置会好得多;-)

编辑:像下面这样的东西对我有用:

yAxis0Extremes = chart.yAxis[0].getExtremes();
yAxisMaxMinRatio = yAxis0Extremes.max / yAxis0Extremes.min;
yAxis1Extremes = chart.yAxis[1].getExtremes();
yAxis1Min = (yAxis1Extremes.max / yAxisMaxMinRatio).toFixed(0);
chart.yAxis[1].setExtremes(yAxis1Min, yAxis1Extremes.max);