Highcharts: X and Y Axis cross at zero in scatter

问题:

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.

回答1:

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/