Javascript 使用highcharts.js在每个xAxis类别标签上显示自定义图标图像[html]

我有这个图表，基本上是一组10行[系列]，我必须在每个栏的开始处添加一个自定义图标（图像），我可以添加一个图像，但在所有行上显示相同的mew元素，非常感谢您的帮助

这是我创建的一个JSFIDLE

这就是我需要的js代码

            labels: {
                color: '#fff',

                x: 5,
                useHTML: true,
                formatter: function () {
                    return '<img class="" src="http://dummyimage.com/60x60/ff6600/ffffff"/>';
                }

            }

标签：{
颜色：“#fff”，
x:5，
是的，
格式化程序：函数（）{
返回“”；
}
}

希望我能得到一些帮助。

见

只需将随机单词占位符替换为所需的任何图像即可

formatter: function () {
    return {
        'Awesome': 'blah',
        'Awesome Previous': 'yadda',
        'Good': 'dabba',
        'Good Previous': 'doo',
        'Okay': 'word',
        'Okay Previous':'up',
        'Awful': 'blah',
        'Awfull Previous': 'blah2'
    }[this.value];
}

---

好吧，你可以先试试这个：

格式化程序：函数（）{
console.log（this）；
返回“”；
}

this

的值是正在绘制的当前行，

this.value

具有标签

如果您在Chrome中运行它并点击F12查看控制台，您可以看到Console.log转储的内容，即完整对象

---

如果需要更多差异，可以在该值上进行分支。

若要为每个标签应用自定义图像，请尝试使用标签作为索引的图像数组：

 $(function () {

        var categoryImgs = {
            'Apples': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img>&nbsp;',
            'Oranges':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Pears':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Grapes':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Bananas':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;'
        };

        $('#container').highcharts({
            chart: {
                type: 'column'
            },

            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
                labels: {
                    x: 5,
                    useHTML: true,                        
                    formatter: function () {
                        return '<div class="myToolTip" title="Hello ' 
                       + this.value +'">' +  categoryImgs[this.value] + '</div>';
                    },

$（函数（）{
变量类别YMGS={
“苹果”：“
};
$（“#容器”）。高图({
图表：{
类型：“列”
},
标题：{
文本：“堆叠柱形图”
},
xAxis：{
类别：[‘苹果’、‘橘子’、‘梨’、‘葡萄’、‘香蕉’]，
标签：{
x:5，
是的，
格式化程序：函数（）{
返回'+categoryImgs[this.value]+''；
},

---

希望这能有所帮助！

我看到您已经将DummyImage放在了所有人面前。您只是想改变一下吗？这就是问题所在，我需要在每个栏上放置一个不同的图标img，有什么办法吗？

 $(function () {

        var categoryImgs = {
            'Apples': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img>&nbsp;',
            'Oranges':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Pears':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Grapes':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Bananas':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;'
        };

        $('#container').highcharts({
            chart: {
                type: 'column'
            },

            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
                labels: {
                    x: 5,
                    useHTML: true,                        
                    formatter: function () {
                        return '<div class="myToolTip" title="Hello ' 
                       + this.value +'">' +  categoryImgs[this.value] + '</div>';
                    },