Question

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

Answer 1

您需要在yAxis标签的格式化函数中设置useHTML true。请参阅下面的代码并working fiddle here

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

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轴中放置图标？

2 个答案: