javascript highchart：在每一列的图表顶部添加图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8703835/
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
highchart: add images to top of chart on every column
提问by Leon
Does anyone know if it's possible to create something like this in Highcharts:
有谁知道是否可以在Highcharts 中创建这样的东西：
It's about the weather icons on the top. I added them as a "scatter graph" which is nice, so the images/graph can be disabled. But I want them always at the top. For example: y=20px or something. Is it possible to do this with Highchart? I know set their data to "30 celcius" but that would mess up the graph if it the temperature would go up to 30 degrees.
这是关于顶部的天气图标。我将它们添加为“散点图”，这很好，因此可以禁用图像/图形。但我希望他们始终处于领先地位。例如：y=20px 什么的。可以用 Highchart 做到这一点吗？我知道将他们的数据设置为“30 摄氏度”，但如果温度上升到 30 度，那会弄乱图表。
回答by eolsson
You can use a trick of having two x-axes, one with images and offset'ed to the top of the chart and one with the usual labels at the bottom:
您可以使用具有两个 x 轴的技巧，一个带有图像并偏移到图表的顶部，另一个带有通常的标签在底部：
xAxis: [{
offset: -290,
tickWidth: 0,
lineWidth: 0,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
x: 5,
useHTML: true,
formatter: function () {
return '<img src="http://highcharts.com/demo/gfx/sun.png"><img> ';
}
}
}, {
linkedTo: 0,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
Full example on jsfiddle
关于jsfiddle 的完整示例
回答by Jayme Tosi Neto
I found a solution by chance because of a logging code I forgot to remove. You can access the data inside the method formatter using "this":
由于我忘记删除的日志记录代码，我偶然找到了一个解决方案。您可以使用“this”访问方法格式化程序中的数据：
...
plotOptions: {
series: {
dataLabels: {
useHTML: true,
enabled: true,
x: -50,
y: -50,
formatter: function(){
console.log(this);
return '<span>'+this.y+'</span><br/>'+this.series+'<img src="'+this.key+'" />';
},
}
...
This code surely isn't working, but shows up the idea, doesn't it? Hope it helps!
这段代码肯定不起作用，但显示了这个想法，不是吗？希望能帮助到你！
回答by Bjorn
Given that highcharts is just SVG you can always go directly and manipulate the SVG to show the images you want, usually with just CSS. You can inspect the chart with Chrome's web inspector and find the elements you want to style. I have to warn you though that having customized highcharts myself in the past has made upgrading to newer versions difficult.
鉴于 highcharts 只是 SVG，您始终可以直接操作 SVG 以显示您想要的图像，通常只使用CSS。您可以使用 Chrome 的网络检查器检查图表并找到您想要设置样式的元素。我必须警告您，尽管过去自己自定义 highcharts 使升级到较新版本变得困难。
回答by Nils Werner
You can add another scatterplot to your seriesthat contains specific markers: http://jsfiddle.net/ZZ7Kd/135/
您可以添加另一个包含特定的scatter情节：http: //jsfiddle.net/ZZ7Kd/135/seriesmarkers
回答by Sebastian Bochan
You can use Renderer.image() to add images in any place on chart
您可以使用 Renderer.image() 在图表的任何位置添加图像
