如何仅在钻取饼图上显示数据标签?

时间:2017-12-18 02:08:17

标签: javascript php laravel charts highcharts

嘿家伙我已经对饼图进行了条形图深入分析,因此其中有一个名为“plotOptions”和“datalabels”的内容,数据标签显示每个条形/切片的值,但我希望数据标签只显示在饼图上而不是条形图当前它在条形图上显示如下: enter image description here

正如您可以看到值“264.50%”和“164.50”,我不想显示该值。 但我不能从代码中删除数据标签,否则它也不会在我的饼图上显示我。

那么如何才能从条形图中删除它?我的代码如下:

<script>

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Chart'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: ''
        }

    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                formatter: function () {
                    var mychart = $('#container').highcharts();
                    var mytotal = 0;

                    for (i = 0; i < mychart.series.length; i++) {
                        if (mychart.series[i].visible) {
                            mytotal = {!! $countTotalRecord['low confidence'] !!} + {!! $countTotalRecord['no answer'] !!} + {!! $countTotalRecord['missing intent'] !!} + {!! $countTotalRecord['webhook fail'] !!};
                        }
                    }
                    var pcnt = (this.y / mytotal) * 100;
                    return Highcharts.numberFormat(pcnt) + '%';
                }
            }
        }
    },

    tooltip: {
        // headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '{point.name}: <b>{point.y}</b>'
    },

    credits:{
      enabled: false
    },

    series: [{
        name: 'front',
        colorByPoint: true,
        data: [{
            name: 'Total',
            y: {!! $countTotalRecord['total'] !!},
            drilldown: 'total'
        }, {
            name: 'Match',
            y: {!! $countTotalRecord['match'] !!},
            drilldown: 'match'
        }]
    }],
    drilldown: {
        series: [{
            name: 'total',
            id: 'total',
            type:'pie',
            data: [
                [
                    'Low Confidence',
                    {!! $countTotalRecord['low confidence'] !!}
                ],
                [
                    'No Answer',
                    {!! $countTotalRecord['no answer'] !!}
                ],
                [
                    'Missing Intent',
                    {!! $countTotalRecord['missing intent'] !!}
                ],
                [
                    'Webhook Fail',
                    {!! $countTotalRecord['webhook fail'] !!}
                ]
            ]
        }]
    }
});

</script>

1 个答案:

答案 0 :(得分:1)

You can pass dataLables enable false in any level series you don`t want to see data labels

 series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{....}],
    dataLabels: {
            enabled: false,
        }
   }],

http://jsfiddle.net/fw3bdjzw/