Highcharts - 如何将气泡图直线排列？

Question

我正在使用Highcharts并希望创建一个气泡图表,其中的条目在同样贬值的气泡大小中都是直线.诀窍在于使气泡之间几乎没有任何空间.像这样

有没有一种简单的方法可以做到这一点,除了编写某种算法将它沿着x轴放置在某一点？

非常感谢.

Answer 1

没有内置选项,没有.您必须自己计算尺寸/ x轴关系.

另一方面,我觉得有义务指出这是提供数据的可怕方式.流行,但很可怕.

不太受欢迎但更好的替代方案是简单的水平条形图,这将允许更好的可读性.

关于原因的一些讨论:

• http://www.perceptualedge.com/example18.php
• http://www.perceptualedge.com/blog/?p=1532

{{编辑::

我手动设置了一个,只是为了解决thought process:

• http://jsfiddle.net/jlbriggs/D3LqV/

基本理念:

• 将x轴设置为min和max,使1 x轴单位= 1个绘图宽度像素,以便于计算
• 而不是使用气泡系列类型,使用散点图,并为每个点指定标记半径值(以像素为单位.这是气泡为系列类型之前的'旧'方式)
• 您可以通过确定最大气泡所需的最大像素大小,然后将编码值($或其他)除以最大值,然后乘以每个值的最大像素大小来计算半径.
• 然后相应地计算你的x值 - 在我的例子中,最大像素半径是50.第一个数据点的x值是50.第二个数据点的x值是100 +它的半径像素值等等......

如果您查看示例,并确保像素宽度和x轴设置相关,则数学运算非常简单.编写一个循环来完成这一切应该只是稍微复杂一点.

{{再次编辑:采取 粗糙的粗糙,但工作,或多或少......

• http://jsfiddle.net/jlbriggs/xe82d/

{再一次:这个会自动考虑图表的宽度:

• http://jsfiddle.net/jlbriggs/yM9jt/