javascript - Highcharts : add images to top of chart on every column

Question

有谁知道是否可以在 Highcharts 中创建这样的东西？ :

关于顶部的天气图标。我将它们添加为很好的“散点图”，因此可以禁用图像/图形。但我希望他们始终处于领先地位。例如:y=20px 什么的。可以用 Highchart 做到这一点吗？我知道将他们的数据设置为“30 摄氏度”，但如果温度上升到 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 上的完整示例