Highcharts 统计报表的使用(饼状图)

时间:2022-10-01 06:18:11

<!--第一步,引入js-->

<script src="../../Scripts/jquery-1.7.1.js"></script>
<script src="../../Scripts/highcharts.js"></script>

<!--第二步,创建一个div,用于显示-->

  <div class="div-img mt-10" id="container" style="width: 940px; height: 250px;">

<!--编写脚本-->

<script>
    $(function () {
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '知识点分布饼状图'

            },
            subtitle: {
                text: '饼状图',
                x: -20
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                }
            },
            series: [{
                type: 'pie',
                name: '比例',
                data: [
                     {
                         name: '男',
                         y: 4
                     },
                     {
                         name: '女',
                         y: 4
                     },
                     {
                         name: '变态',
                         y: 2
                         //sliced: true,
                         //selected: true
                     }
                ]
            }]
        });
    });

</script>