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.如果我们将该轴的最小值设置为25 / -2（= -12.5），那么y = 0线将对齐两个轴。 / p>

虽然有一个标志可以自动设置它会更好; - ）

编辑：像下面这样的东西对我来说很好用：

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);

Answer 4

我知道已经两年了。但是，与之前的答案中给出的现有解决方案相比，我确实找到了更好的解决方案。我的解决方案仍然使用setExtremes为yAxis设置min，max，但具有更好的异常处理，这对show()和hide()任何绘图都非常好。解决方案：link
Github：link

Answer 5

最简单的方法是为每个轴提供相同的最小值/最大值。在绘图调用之前根据数据确定一个好的最小值/最大值是非常简单的（组合数组，将最小值/最大值向下舍入/向上调整到最接近的int，这将是我的方法）。

pretend this is code so I can link to jsFiddle

更新了fiddle。

Answer 6

您可以按照以下代码轻松完成 -

你只需要找到相反的y轴的哪个点与第一个y轴的零点相交，并将opp轴的最小值设置为（那个点* -1）

在我的情况下，yaxis [1]形成主y轴，y轴[0]形成相反的y轴

 }, function(chart) { // on complete
        var factor = chart.yAxis[1].min  / chart.yAxis[1].tickInterval
        var tick = chart.yAxis[0].tickInterval;
        var _min = chart.yAxis[0].tickInterval * factor 
        chart.yAxis[0].update({ min: _min });
        chart.yAxis[0].update({ tickInterval: tick });



    });

Answer 7

我不满意所有答案，因为它不支持负Y轴上的值。以0为中心，我在逻辑下面应用了

找到系列的最小/最大值并填充它，以使0居中

if(max > 0  && min < 0){
{
   const diff = max + min;
   if(diff > 0){
      min = min - diff
   }
   else{
      max = max + -1 * diff
   }
} 
else if (max > 0){
   max = min * -1
}
else{
   min = max * -1
}

然后在图表上定义轴时，使用上方的最小/最大值，这将确保中心显示0

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

7 个答案: