highcharts圖表開發

一、首先引人highcharts圖表插件

 <!-- 引用highcharts圖標插件 -->
    <script type="text/javascript" src="${path}/plugings/highcharts-6.0.2/code/highcharts.js"></script>
    <script type="text/javascript" src="${path}/plugings/highcharts-6.0.2/code/highcharts-3d.js"></script>
    <script type="text/javascript" src="${path}/plugings/highcharts-6.0.2/code/modules/exporting.js"></script>

項目插件結構

二、實例

（1）、實現餅圖
var s = ["stuVm", "teaVm", "serverVm"]
                for (var i = 0; i < s.length; i++) {
                    var obj = s[i];
                    var $obj = $("#" + obj + "Info");
                    $obj.highcharts({
                        chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false,
                            height: 284,
                            width: 324
                        },
                        title: {
                            text: '' + $obj.attr("name") + '使用佔比'
                        },
                        tooltip: {
                            headerFormat: '{series.name}<br>',
                            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                    style: {
                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 

'black'
                                    }
                                }
                            }
                        },
                        series: [{
                            type: 'pie',
                            name: '' + $obj.attr("name") + '使用佔比',
                            size: '60%',
                            data: [
                                {
                                    name: '已啓動',
                                    color: '#8F94F6',
                                    y: rel.vmInfo.data[obj + "Info"][obj + "Online"]
                                }, {
                                    name: '未啓動',
                                    color: '#F7A35C',
                                    y: rel.vmInfo.data[obj + "Info"][obj + "NoOnline"]
                                }

                            ]
                        }],
                        credits: {
                            text: '' + $obj.attr("name") + "總數：" + rel.vmInfo.data[obj + 'Total'],
                        }
                    })
                }

（2）實現柱狀圖
$("#vmInfo").highcharts({
                    chart: {
                        type: 'column',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        height: 284,
                        width: 324
                    },
                    title: {
                        text: '系統彙總統計(系統總數：' + rel.vmInfo.data.vmTotal + '個)'
                    },
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {
                        title: {
                            text: '系統數量（個）'
                        }

                    },
                    legend: {
                        enabled: false
                    },

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

</b> 個<br/>'
                    },

                    series: [{
                        name: '系統',
                        colorByPoint: true,
                        data: [
                            ['學生系統', rel.vmInfo.data.stuVmTotal],
                            ['教師系統', rel.vmInfo.data.teaVmTotal],
                            ['應用系統', rel.vmInfo.data.serverVmTotal],
                            ['總系統數', rel.vmInfo.data.vmTotal]
                        ]
                    }]

                })

(3)實現環形圖
$("#userInfo").highcharts(
                    {
                        chart: {
                            type: 'pie',
                            height: 284,
                            width: 324,
                            options3d: {
                                enabled: true,
                                alpha: 45
                            }
                        },
                        title: {
                            text: '用戶信息彙總（總用戶數：' + rel.userInfo.data.totalNum + '個）'
                        },
                        plotOptions: {
                            pie: {
                                innerSize: 40,
                                depth: 20
                            }
                        },
                        series: [{
                            name: '用戶數量',
                            data: [
                                ['低級學生用戶', rel.userInfo.data.lowStuNum],
                                ['高級學生用戶', rel.userInfo.data.hightStuNum],
                                ['教師用戶', rel.userInfo.data.teaNum],
                                ['管理員', rel.userInfo.data.adminNum],
                                ['太易雲管理員', rel.userInfo.data.taeAdminNum]
                            ]
                        }]
                    }
                )

（4）.實現3D柱狀圖
$("#terInfo").highcharts({
                    chart: {
                        type: 'column',
                        height: 284,
                        width: 324,
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        options3d: {
                            enabled: true,
                            alpha: 10,
                            beta: 25,
                            depth: 70
                        }
                    },
                    title: {
                        text: '終端信息（終端總數：' + rel.terInfo.data.totalNum + '個）'
                    },
                    plotOptions: {
                        column: {
                            depth: 25
                        }
                    },
                    xAxis: {
                        type: 'category',
                        labels: {
                            skew3d: true,
                            style: {
                                fontSize: '12px'
                            }
                        }
                    },
                    yAxis: {
                        title: {
                            text: '終端個數（個）'
                        }
                    },
                    series: [{
                        name: '終端數',
                        colorByPoint: true,
                        data: [['已啓動終端數', rel.terInfo.data.activeNum], ['未啓動終端數', 

rel.terInfo.data.noActiveNum]]
                    }]
                })

(5)實現上下雙層柱狀圖
 $("#imgInfo").highcharts({
                    chart: {
                        type: 'column',
                        height: 284,
                        width: 324,
                        options3d: {
                            enabled: true,
                            alpha: 15,
                            beta: 15,
                            viewDistance: 25,
                            depth: 40
                        }
                    },

                    title: {
                        text: '鏡像信息(總數：' + rel.imgInfo.data.totalImg + '個)'
                    },

                    xAxis: {
                        categories: ['學生鏡像', '教師鏡像', '應用鏡像'],
                        labels: {
                            skew3d: true,
                            style: {
                                fontSize: '16px'
                            }
                        }
                    },

                    yAxis: {
                        allowDecimals: false,
                        min: 0,
                        title: {
                            text: '鏡像個數（個）',
                            skew3d: true
                        }
                    },

                    tooltip: {
                        headerFormat: '<b>{point.key}</b><br>',
                        pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: 

{point.y} / {point.stackTotal}'
                    },

                    plotOptions: {
                        column: {
                            stacking: 'normal',
                            depth: 40
                        }
                    },

                    series: [{
                        name: '已同步鏡像數',
                        data: [{
                            color: '#90ED7D',
                            y: rel.imgInfo.data.stuImg.isSyn
                        },{
                            color: '#90ED7D',
                            y: rel.imgInfo.data.teaImg.isSyn
                        },{
                            color: '#90ED7D',
                            y: rel.imgInfo.data.serverimg.isSyn
                        }]
                    }, {
                        name: '未同步鏡像數',
                        data: [{
                            color: '#FFBC75',
                            y: rel.imgInfo.data.stuImg.noSyn
                        },{
                            color: '#FFBC75',
                            y: rel.imgInfo.data.teaImg.noSyn
                        },{
                            color: '#FFBC75',
                            y: rel.imgInfo.data.serverimg.noSyn
                        }],
                    }]
                })

（6）實現無限疊加餅圖

                var poolArray = rel.poolInfo;
                for (var i = 0; i < poolArray.length; i++) {
                    var poolName = poolArray[i].diskName;
                    var poolUser = poolArray[i].diskUser;
                    var poolSurplus = poolArray[i].diskSurplus;
                    var poolSize = poolArray[i].size;
                    $("#contai").append("<div id='container" + poolName + "'  style='margin-

bottom:100px;margin-left:30px;margin-top:20px;width: 340px;height: 280px;float: left;'></div>");
                    var container = $("#container" + poolName + "").highcharts({
                        chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false,
                            height: 300,
                            width: 380
                        },
                        title: {
                            text: '' + poolName + '磁盤使用佔比'
                        },
                        tooltip: {
                            headerFormat: '{series.name}<br>',
                            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                    style: {
                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 

'black'
                                    }
                                }
                            }
                        },
                        series: [{
                            type: 'pie',
                            name: '' + poolName + '磁盤使用佔比',
                            size: '60%',
                            data: [
                                ['使用', poolUser],
                                ['剩餘', poolSurplus]
                            ]
                        }],
                        credits: {
                            text: "磁盤總容量大小：" + poolSize,
                        }
                    });
                }