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,
                        }
                    });
                }