Highcharts：在柱形图上显示特殊标记

我想在柱形图上放置标记。

确切地说，该图表是在板球比赛中每场得分的得分。 （截至目前的示例生成图： http ： //img839.imageshack.us/img839/6091/screenshot20111117at124.png ）

现在我真正想要的是显示在wicket落在哪个（类似于： http ： //upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Dudley_Nourse_Graph.png/350px-Dudley_Nourse_Graph.png ），列顶部的蓝点。

是否有可能在highcharts中实现这一点？ 我在这个图表中看到了一个这样的片段（这里描述的太阳像： http ： //www.highcharts.com/demo/spline-symbols ）。

Answer 1

我遇到了类似的挑战，我需要在列上放置特定的图标：

为实现这一点，我使用了formatter回调：

 plotOptions: { column: { dataLabels: { enabled: true, useHTML: true, formatter: function() { return '
' + this.y + '
'; }, y: 0 } } } 

如您所见，您可以根据x / y /系列/点/总数/百分比值动态设置图像路径或元素类。

最后，您还需要增加maxPadding的yAxis ，否则图标/值将被切断（显然取决于图标大小）。

要查看一些“动态”占位符图片，请看看这个jsFiddle： http ： //jsfiddle.net/DMCXS/

Answer 2

您可以使用两个系列，第一列和第二个分散与自定义标记。

示例： http ： //jsfiddle.net/NDpu6/

  series: [{ name: 'Tokyo', type:'column', data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, { name: 'New York', type: 'scatter', data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] 

Answer 3

在data数组中，您可以指定特定点的选项（例如要显示的自定义标记）：

 [...] series: [{ name: 'Tokyo', marker: { symbol: 'square' }, data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, /* HERE >>> */{ y: 26.5, marker: { symbol: 'url(/demo/gfx/sun.png)' } }, 23.3, 18.3, 13.9, 9.6] }, [...] 

无论如何，我认为不可能将标记放在图表元素上。

http://www.highcharts.com/ref/#point-marker