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

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