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

确切地说，图表是在板球比赛中的每场比赛中得分。（样本生成的图形，截至目前：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），在列的顶部的蓝色圆点。

在highchart中可以做到这一点吗？我在这个图表中看到了这个片段（像这里描述的太阳：http://www.highcharts.com/demo/spline-symbols）。

来源

2011-11-17 Shamail Tayyab

将是冷静，如果你能接受任何下面的答案:) –

在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

来源

2011-11-17 07:54:26 mamoo

请求约为柱形图，标志仅在线路和区域图可见...... – PhiLho

我也有过类似的挑战，在这里我需要将特定的图标在我列的顶部：

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 
    } 
    } 
}

正如你所看到的，你可以动态地设置一个基于wh的图像路径或元素类atever你的x/y /系列/点/总数/百分比值是。

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

要看到它与一些“动态”占位符画面动作，看看这个的jsfiddle： http://jsfiddle.net/DMCXS/

来源

2013-04-11 04:22:37

您可以使用两个系列，第一列，并具有自定义标记第二散射。

例子：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] 

     }]

来源

2013-04-11 08:46:05

尼斯，特别是因为它与rHighcharts一起工作！ – Kalle

哇，很简单的解决方案。希望在考虑所有更复杂的问题之前，我会考虑它。 – Spencer

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

回答

相关问题