javascript – 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).

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

为实现这一点,我使用了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 /系列/点/总数/百分比值动态设置图像路径或元素类.

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

要使用一些“动态”占位符图片查看它,请查看此jsFiddle:
http://jsfiddle.net/DMCXS/

相关文章
相关标签/搜索