14

请参阅此JSFiddle。如何让 y 轴零对齐？

4

7 回答 7

13

简短的回答是：你不能。

您可以调整轴缩放、填充和刻度位置等，并可能得到您想要的，但没有设置来完成此操作。

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

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

编辑：OTOH，我不得不提一下，像这样的双轴图表通常是显示数据的一种非常糟糕的方式，并邀请用户进行无效的比较。

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

FWIW

于 2013-04-18T15:41:38.400 回答
9

在添加此功能之前，一个简单的解决方法是确保两个轴的最大/最小比率相同。例如，主 y 轴的最小值和最大值为 -20 和 40，则最大值/最小值比率为 -2。现在假设第二个 y 轴的最大值为 25。如果我们将此轴的最小值设置为 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);
于 2013-09-21T13:59:07.127 回答
7

You can set min / max value for first yAxis and use linkedTo to second axis, but I'm not sure if you expect this effect:

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
        }],
于 2013-04-19T08:11:35.030 回答
1

我知道已经两年了。但是，与先前答案中给出的现有解决方案相比，我确实找到了更好的解决方案。我的解决方案仍然使用 setExtremes 为 yAxis 设置最小值、最大值，但具有更好的异常处理，这对任何情节都非常show()好hide()。解决方案：链接
Github：链接

于 2015-07-30T04:24:58.367 回答
0

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

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

在我的例子中，yaxis[1] 形成主 y 轴，yaxis[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 });



    });
于 2015-03-03T11:49:18.677 回答
0

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

pretend this is code so I can link to jsFiddle

更新了小提琴。

于 2013-04-18T20:12:27.093 回答
0

我对所有答案都有疑问，因为它不支持负 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 显示在中心

于 2020-07-10T06:27:33.073 回答