前言

：
最近小編在做圖形展現這塊的功能,用到了大家常用的Highcharts,本篇部落格小編來總結一下專案中的應用:

核心

程式碼

/**更新全場工作計劃**/
    function updataFactoryPlainData(){



    $('#factionPlainCharts').highcharts({
            chart: {
                type: 'pie',
                height:'200'
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            colors:[
                '#90EE7E',//第一個顏色  淺綠
                '#F7A35C',//第二個顏色  橘黃
                '#FA8072',//第三個顏色 品紅
                '#DDDF00',//第四個顏色  黃色
                '#32CD32' //第五個顏色  綠色
            ],
            //禁用匯出模組
            exporting:{
                enabled:false
            },
            //資料列配置
            legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            borderWidth: 0

        },
         plotOptions: {
                pie: {
                    shadow: false,
                    center: ['40%', '30%'],  //餅圖圓心座標
                    showInLegend:true
                }
            },
            tooltip: {
                valueSuffix: ''  //資料提示框 中 資料字尾
            },
            title:'',
            //遮蔽版權資訊
            credits:{
                enabled:false
            },
            series: [{
                name: '數量',
                data: D_3_1_inner,
                size: '80%',
                dataLabels: {
                    enabled:false
                }
            }, {
                name: '數量',
                data: D_3_1_outer,
                size: '80%',
                innerSize: '80%',
                dataLabels: {
                    enabled:false
                },
                id: 'versions'
            }]
        });

    }

/**全場工作計劃**/
                innerData = data.D_3_1.innerData;
                outterData = data.D_3_1.outterData;
                for( i=0;i<innerData.length;i++){

                    D_3_1_inner.push({
                          name: innerData[i].name,
                          y:innerData[i].value
                    });
                }
                for( i=0;i<outterData.length;i++){

                    D_3_1_outer.push({
                          name: outterData[i].name,
                          y:outterData[i].value
                    });
                }

效果圖

官方文件:
https://api.hcharts.cn/highcharts

總結

感謝讀者的閱讀