如何将动态高图表的图标放在y轴上

Question

有没有人有动态高图表的例子，其中y轴使用图标（例如笑脸/皱眉）而不是字母数字字符？

Answer 1

您需要在yAxis标签的格式化程序函数中设置useHTML true。请参阅下面的代码并在这里工作

对于动态图像，可以将图像路径作为变量。如果您不想显示轴值，请从格式化程序功能中删除"this.value"

yAxis: { labels: {
        formatter: function() {
            return '<img src="http://highcharts.com/demo/gfx/sun.png" alt="" style="vertical-align: middle; width: 32px; height: 32px"/>'+ this.value;
        },
        useHTML: true
    }
    }

Answer 2

为了防止其他人想要制作一个y轴有多个图像的图表，我是这样做的：

        var chartScales =  scales.map(function(x){ return { value:x.Text, key:++imageIndex, image:x.DefaultImage }; });
        var chart = $("#chartContainer").highcharts({
            chart: {
                type: 'spline'
            },
            yAxis:{
                categories: chartScales,
                labels: {
                    formatter : function()
                    {
                        // if there's an image use it, otherwise use the text, or key value
                        if(this.value.image != null)
                            return "<img src='"+ this.value.image +"'  style='vertical-align: middle; width: 32px; height: 32px'/>"+(this.value.value != null ? this.value.value : this.value.key);
                        return this.value.value != null ? this.value.value : this.value.key;
                    },
                    useHTML: true
                }
            },
            series: [{
                data: []
            }]
        });