Highcharts 饼图数值显示在图形上

时间:2022-08-23 21:14:56

1.引用js文件

<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>

<script src="/global/plugins/highcharts/highcharts.js" type="text/javascript"></script>
<script src="/global/plugins/highcharts/highcharts-3d.js" type="text/javascript"></script>
<!-- <script src="/global/plugins/highcharts/themes/grid.js" type="text/javascript"></script>-->
<script src="/global/plugins/highcharts/modules/exporting.js" type="text/javascript"></script>

2.主体部分

<div id="container" style="min-width:400px;height:400px"></div>

$(function () {

    $(document).ready(function () {

        // Build the chart
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: true
            },
            title: {
                text: '数值显示在图形区域'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                       distance: -30,
                        format:'<b>{point.y}</b>',
                       
                    },
                    showInLegend: true
                
                }
            },
             legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
            series: [{
                type: 'pie',
                name: '占比',
                distance: -10,
                data: [
                    ['Firefox',   45.0],
                    ['IE',       26.8],
                    {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    }
                ]
            }]
        });
    });

});