javascript - 我怎样才能在我的 Highcharts 饼图中获得一个字体超棒的图标数据标签？

Question

我正在尝试让 highchart 的饼图与 font-awesome 一起使用(或者实际上，我们有 ico-moon 但我认为该技术是相同的，所以为了这个练习，我将使用 Font Awesome )。我希望数据标签(在我的 fiddle 中，那些写着“图标”的标签)实际上是图标。我不想改变任何其他东西，因为饼图到目前为止是完美的。只需添加图标。

有人有什么建议可以帮助吗？我有可用的 unicodes 和标签。

提前致谢!

我的 fiddle : http://jsfiddle.net/ewyss/z98ofd63/

    $(function () {
    var chart;


    $(document).ready(function () {

        Highcharts.setOptions({
            colors: ['#f1f1f1', '#A24130', '#A24130', '#A24130', '#A24130']
        });

        var chart;


        // Build the chart
        piechart = new Highcharts.Chart({
            chart: {
                renderTo: 'piecontainer',
                plotBackgroundColor: null,
                plotBorderWidth: 0
            },
            title: {
                text: null
            },
            credits: {
                enabled: false
            },
            tooltip: {
                pointFormat: false
            },
            plotOptions: {
                pie: {
                    startAngle: -270,
                    allowPointSelect: false,
                    dataLabels: {
                        softConnector: false,
                        //if data.point.name == empty string return enabled: false, else return enabled: true... This will be the slice called slice
                        enabled: true,
                        connectorWidth: 1,
                        distance: 15,
                        style: {
                            fontFamily: 'roboto',
                            fontSize: '8pt',
                            width: 80
                        }
                    },
                    showInLegend: false
                }
            },
            series: [{
                type: 'pie',
                name: 'PPM Resource Waste',
                data: [
                    ['Blank', 60],
                    ['Icon 1%', 5],
                    ['Icon 15%', 15],
                    ['Icon 1%', 5],
                    ['Icon 5%', 5]
                ],
                animation: false
            }]
        });
    });
});

Answer 1

您可以在数据集的标签内添加图标。类似于 <i class='fa fa-times'></i> .默认情况下，任何 HTML 都会从您的标签中删除，但您可以通过设置 dataLabels.useHTML 启用它至 true .

简而言之，您必须更改此设置:

        series: [{
            type: 'pie',
            name: 'PPM Resource Waste',
            data: [
                ['Blank', 60],
                ['Icon 1%', 5],
                ['Icon 15%', 15],
                ['Icon 1%', 5],
                ['Icon 5%', 5]
            ],
            animation: false
        }]

类似这样的东西:

             series: [{
                type: 'pie',
                name: 'PPM Resource Waste',
                data: [
                    ['<i class="fa fa-dollar fa-2x"></i> Blank', 60],
                    ['<i class="fa fa-save"></i> Icon 1%', 5],
                    ['<i class="fa fa-cutlery"></i> Icon 15%', 15],
                    ['<i class="fa fa-ban"></i> Icon 1%', 5],
                    ['<i class="fa fa-spinner fa-spin"></i> Icon 5% ', 5],
                ],
                dataLabels: {
                    useHTML: true
                },
                animation: false
            }]

如您在更新的 fiddle 中所见:http://jsfiddle.net/z98ofd63/1/