Highcharts:在柱形图上显示特殊标记 [英] Highcharts: Show special marker on column chart
问题描述
我想在柱形图上放置标记。
准确地说,图表是板球比赛中每场比赛的得分。 (截至目前为止的样本生成图:
I want to put markers on a column chart.
To be precise the chart is a for runs scored in each over in the game of cricket. (a sample generated graph as of now: http://img839.imageshack.us/img839/6091/screenshot20111117at124.png)
Now what I actually want is to show in which over the wicket fell (something like: http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Dudley_Nourse_Graph.png/350px-Dudley_Nourse_Graph.png), the blue dots on top of the columns.
Is it possible to accomplish this in highcharts? I see a snippet of this in this chart (something like sun depicted here: http://www.highcharts.com/demo/spline-symbols).
I had a similar challenge, where I needed to place specific icons on top of my columns:
To achieve this, I used the formatter
callback:
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
}
}
}
As you can see, you could then dynamically set an image path or element class based on whatever your x/y/series/point/total/percentage value is.
Finally, you also will need to increase the maxPadding
for the yAxis
, otherwise the icons/values will be cut off (depending on the icon size, obviously).
To see it in action with some 'dynamic' placeholder pictures, have a look at this jsFiddle: http://jsfiddle.net/DMCXS/
这篇关于Highcharts:在柱形图上显示特殊标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!