Highcharts：X轴和Y轴在散点图中以零点交叉 [英] Highcharts: X and Y Axis cross at zero in scatter chart

问题描述

在高图中，我想绘制一个散点图/气泡图，其中x值范围从-50到+50，y值从-100到+100。有没有办法让x轴和y轴被绘制出来，以便它们在图表的中间位置以零交叉？

我尝试过使用'offset '轴参数，它确实移动轴，例如 http://bit.ly/Xd9Z51 但这种方法存在以下问题：

1. 不能动态设置偏移参数，因此如果一系列更新并更改最小/最大x / y值，则该轴不再过零。 li>
   
2. 如果缩放，轴不会再过零。


3. 计算像素偏移量非常困难，需要考虑div大小，边距，标题等。


4. 调整包含div的大小会导致所需的轴偏移位置发生更改。

解决方案

现在唯一的解决方案是使用偏移参数。然而，自Highcharts 3.0以来，您可以自由控制该属性和更新轴：

  chart.yAxis [index] .update（options）; 
  

其中options是包含yAxis选项的对象，包括偏移量。要获得像素位置，您可以使用内部函数 chart.xAxis [index] .translate（value）（小哈克，但有效）。所以，当两者合并时，请参阅示例： http://jsfiddle.net/UGpPV/6/

In highcharts, I want to plot a scatter/bubble chart where the x values range from -50 to +50, and the y values from -100 to +100. Is there a way to get the x and y axis to be plotted so that they cross at zero in the center of the chart ?

I've tried using the 'offset' parameter in the axis, which does move the axis, e.g. http://bit.ly/Xd9Z51 but this approach has the following problems:

1. You can't set the offset parameter dynamically, so if a series updates and changes the min/max x/y values, the axis no longer cross at zero.
2. If you zoom, the axis no longer cross at zero.
3. It's quite hard to calculate the offsets in pixels, taking into account div size, margins, titles etc.
4. Resizing the containing div causes the required axis offset positions to change.

解决方案

Right now the only solution is to use offset parameter. However since Highcharts 3.0 you can control freely that property and update axis:

chart.yAxis[index].update( options );

Where options is an object with options for yAxis, including offset. To get pixel position, you can use inner function chart.xAxis[index].translate(value) (little hacky, but works). So when both are combined, see example: http://jsfiddle.net/UGpPV/6/

这篇关于Highcharts：X轴和Y轴在散点图中以零点交叉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！