如何在图例中添加不同的图标

时间:2015-05-10 09:48:26

标签: angularjs highcharts

我有这个图表http://jsfiddle.net/Cp73s/2169/,我想在图例中添加不同的图标,但我不知道怎么做。

labelFormatter: function () {
    $scope.data = this.total;
    console.log($scope.data);
    return '<img src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png" width="15" height="15"></span>' + this.y + ' (' + this.percentage.toFixed(2) + '%) - ' + this.name;
},

1 个答案:

答案 0 :(得分:1)

有相当广泛的列表,因此您需要手动绘制出您想要为每个项目使用的图像。我创建了一个JSFiddle,它说明了如何使用switch语句执行此操作。

为了让它更快一点,我使用了Font Awesome,我建议你注意:

labelFormatter: function () {
    $scope.data = this.total;
    var labelName = this.name,
        icon = '';

    switch(labelName){
        case 'APP Android':
            icon = 'android';
            break;
        case 'APP Ios':
            icon = 'apple';
            break;
        default: // If no match is found, revert to a check icon
            icon = 'check'
    }
    return '<i class="fa fa-' + icon + '"></i> ' + this.y + ' ('+ this.percentage.toFixed(2) +'%) - ' +this.name;
},