如何将图标放在动态 Highcharts 图表的 y 轴中？

Question

有没有人提供 Y 轴使用图标（例如 smiley/frowney 面孔）而不是字母数字字符的 Dynamic Highcharts 示例？

Answer 1

您需要在 yAxis 的格式化程序函数中将 useHTML 设置为 true label.See 下面的代码和 working fiddle here

对于动态图片，您可以将图片路径作为变量。如果您不想显示轴值，请从格式化函数

中删除 "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: []
            }]
        });

如何将图标放在动态 Highcharts 图表的 y 轴中？

How do I put Icons in the y Axis for a Dynamic Highcharts chart?

icons

dynamic

highcharts