javascript - 如何在Highcharts饼图中获取 Font Awesome 图标的数据标签？

我试图获得一个highchart的饼图以使用真棒字体（或实际上，我们有ico-moon，但我认为该技术是相同的，因此为了进行本练习，我将使用真棒字体）。我希望数据标签（在我的小提琴中，那些说“ icon”的标签）实际上是图标。我不想更改任何其他内容，因为该饼图到目前为止非常完美。只需添加图标即可。

有人有什么建议吗？我有可用的unicode和标签。

提前致谢！

我的小提琴：
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
            }]
        });
    });
});

最佳答案

您可以在数据集的标签内添加图标。类似于<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
            }]

正如您在更新的小提琴中看到的：http://jsfiddle.net/z98ofd63/1/

关于javascript - 如何在Highcharts饼图中获取 Font Awesome 图标的数据标签？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27237476/