highchart：在每列上添加图像到图表顶部

Question

有谁知道是否可以在Highcharts中创建这样的内容：

这是关于顶部的天气图标。我将它们添加为“散点图”，这很好，因此可以禁用图像/图形。但我希望他们永远在顶端。例如：y = 20px或其他东西。是否可以使用Highchart执行此操作？我知道将他们的数据设置为“30 celcius”，但如果温度上升到30度，这会弄乱图表。

Answer 1

你可以使用两个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>&nbsp;';
        }
    }
}, {
    linkedTo: 0,
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],

jsfiddle

上的完整示例

Answer 2

由于我忘记删除日志代码，我偶然找到了一个解决方案。您可以使用“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+'" />';
            },
        }
    ...

这段代码肯定不起作用，但是出现了这个想法，不是吗？ 希望它有所帮助！

Answer 3

鉴于highcharts只是SVG，你可以随时直接操作SVG来显示你想要的图像，通常只需要CSS。您可以使用Chrome的Web检查器检查图表，并找到要设置样式的元素。我必须警告你，尽管我自己过去定制过高级版，但是升级到新版本很困难。

Answer 4

您可以向包含特定scatter的{​​{1}}添加另一个series地块：http://jsfiddle.net/ZZ7Kd/135/

Answer 5

您可以使用Renderer.image（）在图表上的任何位置添加图像

http://api.highcharts.com/highcharts#Renderer.image()