Question

我有这个图表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;
},

Answer 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;
},

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

1 个答案: