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

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

column markers

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

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

要查看一些“动态”占位符图片，请查看此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

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

3 个答案: