javascript - Highcharts:在柱形图上显示特殊标记

Question

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

准确地说，该图表是板球比赛中每轮比赛得分的图表。 (截至目前生成的示例图:http://img839.imageshack.us/img839/6091/screenshot20111117at124.png)

现在我真正想要的是显示哪个小门落在哪个地方(类似于: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 '<div style="text-align:center"><div>' + this.y + '</div><div class="dynamic-class-' + this.series.name.toLowerCase() +'"><img src="/path/to/special/icon"></div></div>'; 
      },
      y: 0
    }
  }
}

如您所见，您可以根据 x/y/series/point/total/percentage 值动态设置图像路径或元素类。

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

要查看一些“动态”占位符图片的实际效果，请查看此 jsFiddle: http://jsfiddle.net/DMCXS/