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

标签 javascript jquery html css highcharts

我正在尝试让 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
            }]
        });
    });
});

最佳答案

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

关于javascript - 我怎样才能在我的 Highcharts 饼图中获得一个字体超棒的图标数据标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27237476/

相关文章:

javascript - 从 Javascript/XPCOM 调用的批处理文件不显示命令提示符窗口

javascript - Javascript 对象的深拷贝在 Vue.js 中没有按预期工作

javascript - 如何对多个 Google 工作表中的特定列进行排序

javascript - jquery .click() 并不完成与实际单击链接相同的过程;需要单击实际链接才能使流程正常运行

javascript - 如何在单击 meteor 中动态生成的每个 block 时显示表单?

javascript - 如何使用 jQuery 获取非特定 DIV 元素的内容

javascript - 如何在连接的 React-Redux 组件中测试 componentWillMount?

javascript - 需要内联日期、月份和年份选择标签

javascript - 定位 Span jQuery Controller

html - 弃用的 HTML 元素仍然有效