javascript Highcharts：在柱形图上显示特殊标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8163556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts: Show special marker on column chart
提问by Shamail Tayyab
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)
准确地说，该图表是在板球比赛中每局得分的图表。（截至目前的示例生成图：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.
现在我真正想要的是显示检票口落在哪个位置（类似于：http: //upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Dudley_Nourse_Graph.png/350px-Dudley_Nourse_Graph.png），列顶部的蓝点。
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).
是否有可能在 highcharts 中实现这一点？我在这张图表中看到了一个片段（类似于此处描绘的太阳：http: //www.highcharts.com/demo/spline-symbols）。
回答by Patrik Affentranger
I had a similar challenge, where I needed to place specific icons on top of my columns:
我遇到了类似的挑战，我需要在我的列顶部放置特定的图标：
To achieve this, I used the formattercallback:
为了实现这一点，我使用了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
}
}
}
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.
如您所见，您可以根据 x/y/series/point/total/percentage 值动态设置图像路径或元素类。
Finally, you also will need to increase the maxPaddingfor the yAxis, otherwise the icons/values will be cut off (depending on the icon size, obviously).
最后，你还需要增加maxPadding了yAxis，否则图标/值将被切断（根据图标的大小，很明显）。
To see it in action with some 'dynamic' placeholder pictures, have a look at this jsFiddle: http://jsfiddle.net/DMCXS/
要使用一些“动态”占位符图片查看它的实际效果，请查看此 jsFiddle：http: //jsfiddle.net/DMCXS/
回答by Sebastian Bochan
You can use two series, first column, and second scatter with customised marker.
您可以使用带有自定义标记的两个系列、第一列和第二个散点图。
Example: http://jsfiddle.net/NDpu6/
示例：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]
}]
回答by mamoo
In the dataarray you can specify options for a particular point (such as a custom marker to show):
在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]
},
[...]
Anyway I don't think is possible to put the marker over the chart element.
无论如何，我认为不可能将标记放在图表元素上。
