前端之echarts与highcharts的使用
来源：互联网 发布：unity3d 插件下载网站 编辑：程序博客网 时间：2024/06/13 01:29
左图
¯1、实现方式echarts
¯2、画1个月内温度曲线图。要求：1条为每日最高温，红色。1条为每日最低温，蓝色。
¯3、要2个Y轴。一个对应最高温，一个对应最低温。
¯4、在当月最高温和最低温加上图标。
¯5、需要一个时间轴，默认展示最后10天。
¯6、tooltip:展示 红色小圆点（时间最高温：*度）
¯ 蓝色小圆点（时间最低温：*度）
¯7、点击某个点，alert(日期：最高温**，最低温**，天气：随机）
右图
¯1、实现方式highcharts
¯2、随机生成500-1000条syslog数据，获取解析结果。
¯3、用3D饼图展示syslog数据的级别分布。
¯ tooptip展示为：级别，条数，百分比。（如：error-100条-15%）
¯4、点击单个级别，下钻到当前级别的设备分布图。（用柱状展示）
package com.ponshine.syslog;import java.util.HashMap;import java.util.Map;/** * 存放数据 * @author Administrator * */public class UserInfo {private String name; //级别private int total; //条数private double rate; //占比private Map<String, Integer> deviceMap; //设备-条数public UserInfo() {deviceMap = new HashMap<String, Integer>();}public String getName() {return name;}public void setName(String name) {this.name = name;}public int getTotal() {return total;}public void setTotal(int total) {this.total = total;}public double getRate() {return rate;}public void setRate(double rate) {this.rate = rate;}public Map<String, Integer> getDeviceMap() {return deviceMap;}public void setDeviceMap(Map<String, Integer> deviceMap) {this.deviceMap = deviceMap;}}package com.ponshine.syslog;import java.util.Map;import java.util.Random;import com.google.gson.Gson;public class SyslogAction {private String syslogJsonString;public String analysis() {syslogAnalysis();return "success";}private void syslogAnalysis() {UserInfo[] userInfos = new UserInfo[8];String[] levelNames = {"emergency", "alert", "critical", "error", "warning", "notice", "informational", "debug"};String[] deviceNames = {"kernel messages", "user-level messages", "mail system", "system daemons", "security/authorization messages", "messages generated internally by syslogd", "line printer subsystem", "network news subsystem","UUCP subsystem", "clock daemon", "authorization messages", "FTP daemon", "NTP subsystem", "log audit", "log alert", "clock daemon (note 2)","local use 0", "local use 1", "local use 2", "local use 3", "local use 4", "local use 5", "local use 6", "local use 7"};for (int i = 0;i < userInfos.length; i++) {userInfos[i] = new UserInfo();userInfos[i].setName(levelNames[i]);Map<String, Integer> deviceMap = userInfos[i].getDeviceMap();for (int j = 0;j < deviceNames.length; j++) {deviceMap.put(deviceNames[j], 0);}}Random random = new Random();for (int i = 0;i < 500; i++) {int number = Math.abs(random.nextInt()) % 168;int deviceNumber = number / 8;int levelNumber = number % 8;System.out.println(levelNumber+" "+userInfos.length);userInfos[levelNumber].setTotal(userInfos[levelNumber].getTotal() + 1);Map<String, Integer> deviceMap = userInfos[levelNumber].getDeviceMap();int oriTotal = 0;if (deviceMap.get(deviceNames[deviceNumber]) != null) {oriTotal = deviceMap.get(deviceNames[deviceNumber]);}deviceMap.put(deviceNames[deviceNumber], oriTotal + 1);}for (int i = 0;i < 8; i++) {userInfos[i].setRate(userInfos[i].getTotal() * 1.0 / 500);}Gson gson = new Gson();syslogJsonString = gson.toJson(userInfos).toString();}public static void main(String[] args) {UserInfo[] userInfos = new UserInfo[8];String[] levelNames = {"emergency", "alert", "critical", "error", "warning", "notice", "informational", "debug"};String[] deviceNames = {"kernel messages", "user-level messages", "mail system", "system daemons", "security/authorization messages", "messages generated internally by syslogd", "line printer subsystem", "network news subsystem","UUCP subsystem", "clock daemon", "authorization messages", "FTP daemon", "NTP subsystem", "log audit", "log alert", "clock daemon (note 2)","local use 0", "local use 1", "local use 2", "local use 3", "local use 4", "local use 5", "local use 6", "local use 7"};for (int i = 0;i < userInfos.length; i++) {userInfos[i] = new UserInfo();userInfos[i].setName(levelNames[i]);}Random random = new Random();for (int i = 0;i < 500; i++) {int number = Math.abs(random.nextInt()) % 168;int deviceNumber = number / 8;int levelNumber = number % 8;userInfos[levelNumber].setTotal(userInfos[levelNumber].getTotal() + 1);Map<String, Integer> deviceMap = userInfos[levelNumber].getDeviceMap();int oriTotal = 0;if (deviceMap.get(deviceNames[deviceNumber]) != null) {oriTotal = deviceMap.get(deviceNames[deviceNumber]);}deviceMap.put(deviceNames[deviceNumber], oriTotal + 1);}for (int i = 0;i < 8; i++) {userInfos[i].setRate(userInfos[i].getTotal() * 1.0 / 500);}Gson gson = new Gson();System.out.println(gson.toJson(userInfos).toString());}public String getSyslogJsonString() {return syslogJsonString;}public void setSyslogJsonString(String syslogJsonString) {this.syslogJsonString = syslogJsonString;}}在highcharts修改前端页面时，这里给出的是饼图下钻柱形图，若要修改为柱形图，只需要将所有的pie修改为column即可，特别要注意的是 plotOptions : {pie : 这里也还有个pie<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html><html><head><!-- 温度前台自己设置60个数jiukey --><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="script/jquery.js"></script><script type="text/javascript" src="script/highcharts/highcharts.js"></script><script type="text/javascript" src="script/highcharts/highcharts-3d.js"></script><script type="text/javascript" src="script/highcharts/data.js"></script><script type="text/javascript" src="script/echarts/js/echarts.js"></script><title>echarts/highchats学习</title></head><body><table><tr><td><divstyle="border-style: solid; width: 700px; height: 550px; border-color: black; border-width: 1px"id="testEcharts"></div></td><td><divstyle="border-style: solid; width: 700px; height: 550px; border-color: black; border-width: 1px"id="testHighChats"></div><br/><button id="button">饼图</button></button></div></td></tr></table></body></html><script type="text/javascript">var chart = null;testEcharts();testHighcharts();var echartTest;var val;$("button").click(function(){ testHighcharts();});function testEcharts() {var ecConfig = require.config({paths : {echarts : 'script/echarts/js'}});// 调用插件生成报表require([ 'echarts', 'echarts/chart/line', 'echarts/chart/bar' ],function(ec) {echartTest = ec.init(document.getElementById('testEcharts'));var echartOption = option = {title : {'text':'2017年1月份温度变化','subtext':'数据来自国家瞎编组织'}, tooltip : { trigger: 'axis' }, legend: { data:['最高温度（摄氏度）','最低温度（摄氏度）'] },grid : {'y':80,'y2':100}, toolbox: { show : true, orient: 'vertical', // 布局方式，默认为水平布局，可选为： // 'horizontal' ¦ 'vertical' x: 'right', // 水平安放位置，默认为全图右对齐，可选为： // 'center' ¦ 'left' ¦ 'right' // ¦ {number}（x坐标，单位px） y: 'top', // 垂直安放位置，默认为全图顶端，可选为： // 'top' ¦ 'bottom' ¦ 'center' // ¦ {number}（y坐标，单位px） color : ['#1e90ff','#22bb22','#4b0082','#d2691e'], backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色 borderColor: '#ccc', // 工具箱边框颜色 borderWidth: 0, // 工具箱边框线宽，单位px，默认为0（无边框） padding: 5, // 工具箱内边距，单位px，默认各方向内边距为5， showTitle: true, feature : { mark : { show : true, title : { mark : '辅助线-开关', markUndo : '辅助线-删除', markClear : '辅助线-清空' }, lineStyle : { width : 1, color : '#1e90ff', type : 'dashed' } }, dataZoom : { show : true, title : { dataZoom : '区域缩放', dataZoomReset : '区域缩放-后退' } }, dataView : { show : true, title : '数据视图', readOnly: true, lang : ['数据视图', '关闭', '刷新'], optionToContent: function(opt) { var axisData = opt.xAxis[0].data; var series = opt.series; var table = '<table style="width:100%;text-align:center"><tbody><tr>' + '<td>时间</td>' + '<td>' + series[0].name + '</td>' + '<td>' + series[1].name + '</td>' + '</tr>'; for (var i = 0, l = axisData.length; i < l; i++) { table += '<tr>' + '<td>' + axisData[i] + '</td>' + '<td>' + series[0].data[i] + '</td>' + '<td>' + series[1].data[i] + '</td>' + '</tr>'; } table += '</tbody></table>'; return table; } }, magicType: { show : true, title : { line : '动态类型切换-折线图', bar : '动态类型切换-柱形图', stack : '动态类型切换-堆积', tiled : '动态类型切换-平铺' }, type : ['line', 'bar', 'stack', 'tiled'] }, restore : { show : true, title : '还原', color : 'black' }, saveAsImage : { show : true, title : '保存为图片', type : 'jpeg', lang : ['点击本地保存'] }, myTool : { show : true, title : '自定义扩展方法', icon : 'image://../asset/ico/favicon.png', onclick : function (){ alert('myToolHandler') } } } }, calculable : true, dataZoom : { show : true, realtime : true, start : 67, end : 100 }, xAxis : [ { type : 'category', boundaryGap : false, data : function (){ var list = []; for (var i = 1; i <= 30; i++) { list.push('2017-01-' + i); } return list; }() } ], yAxis : [{'type':'value','name':'最高温度（摄氏度）',},{'type':'value','name':'最低温度（摄氏度）'} ], series : [ { name:'最高温度（摄氏度）', type:'line', itemStyle: { normal: { color: 'red', } }, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, data:function (){ var list = []; for (var i = 1; i <= 30; i++) { list.push(Math.round(Math.random()* 30) + 10); } return list; }() }, { name:'最低温度（摄氏度）','yAxisIndex':1, type:'line', itemStyle: { normal: { color: 'blue', } }, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, data:function (){ var list = []; for (var i = 1; i <= 30; i++) { list.push(Math.round((Math.random()-0.5)* 10)); } return list; }() } ]};// 设置点击事件var ecConfig = require('echarts/config');echartTest.on(ecConfig.EVENT.CLICK, createBar);echartTest.setOption(echartOption);});}function createBar(e) {var list = ["晴天","多云","阴","雨",,"雪"];var index = Math.floor(Math.random()*list.length);var weather = list[index];console.log(e);if (typeof(weather)=="undefined") {weather = "一个坏天气";} else {alert(e.name + "号\n" + e.seriesName + e.value + "°C\n天气:" + weather);}}function testHighcharts() {$.ajax({ type:"POST", url:"getAnalysis.action", dataType:'json', async:false, success:function(data){ var arr = new Array(); val = eval(data);if(data!=null && data.length != 0){ for(var w=0;w<data.length;w++){ var value = [ data[w].name , parseInt(parseFloat(data[w].rate)*1000) ] ; arr.push(value); }}/* $('#testHighChats').highcharts({ chart : {type : 'pie',options3d : {enabled : true,alpha : 45}},title : {text : 'Contents of Highsoft\'s weekly fruit delivery'},subtitle : {text : '3D donut in Highcharts'},plotOptions : {pie : {innerSize : 100,depth : 45}},tooltip : { pointFormat: '{series.name}: <b>{point.y}</b><br/><b>{point.percentage:.1f}%</b>'},series : [ {name : 'Delivered amount',data : [ [ val[0].name , parseInt(val[0].total) , val[0].name , ], [ val[1].name , parseInt(val[1].total) ], [ val[2].name , parseInt(val[2].total) ], [ val[3].name , parseInt(val[3].total) ], [ val[4].name , parseInt(val[4].total) ], [ val[5].name , parseInt(val[5].total) ], [ val[6].name , parseInt(val[6].total) ], [ val[7].name , parseInt(val[7].total) ] ]} ],drilldown: { series: [{ name: val[0].name, id: val[0].name, data: [ [ 'v11.0', 24.13 ], [ 'v8.0', 17.2 ], [ 'v9.0', 8.11 ], [ 'v10.0', 5.33 ], [ 'v6.0', 1.06 ], [ 'v7.0', 0.5 ] ] }] }}); */ var colors = Highcharts.getOptions().colors, categories = [ val[0].name, val[1].name, val[2].name, val[3].name, val[4].name, val[5].name, val[6].name, val[7].name], name = 'syslog',data = [{name : val[0].name,y : parseInt(val[0].rate * 100),color : colors[0],//一级钻取drilldown : {name : val[0].name,type : 'pie',categories : ["kernel messages", "user-level messages", "mail system", "system daemons", "security/authorization messages", "messages generated internally by syslogd", "line printer subsystem", "network news subsystem","UUCP subsystem", "clock daemon", "authorization messages", "FTP daemon", "NTP subsystem", "log audit", "log alert", "clock daemon (note 2)","local use 0", "local use 1", "local use 2", "local use 3", "local use 4", "local use 5", "local use 6", "local use 7"],data : [val[0].deviceMap["kernel messages"],val[0].deviceMap["user-level messages"],val[0].deviceMap["mail system"],val[0].deviceMap["system daemons"],val[0].deviceMap["security/authorization messages"],val[0].deviceMap["messages generated internally by syslogd"],val[0].deviceMap["line printer subsystem"],val[0].deviceMap["network news subsystem"],val[0].deviceMap["UUCP subsystem"],val[0].deviceMap["clock daemon"],val[0].deviceMap["authorization messages"],val[0].deviceMap["FTP daemon"],val[0].deviceMap["NTP subsystem"],val[0].deviceMap["log audit"],val[0].deviceMap["log alert"],val[0].deviceMap["clock daemon (note 2)"],val[0].deviceMap["local use 0"],val[0].deviceMap["local use 1"],val[0].deviceMap["local use 2"],val[0].deviceMap["local use 3"],val[0].deviceMap["local use 4"],val[0].deviceMap["local use 5"],val[0].deviceMap["local use 6"],val[0].deviceMap["local use 7"],val[0].deviceMap["user-level messages"]],color : colors[0]}},{name : val[1].name,y : parseInt(val[1].rate * 100),color : colors[1],//一级钻取drilldown : {type : 'pie',name : val[1].name,categories : ["kernel messages", "user-level messages", "mail system", "system daemons", "security/authorization messages", "messages generated internally by syslogd", "line printer subsystem", "network news subsystem","UUCP subsystem", "clock daemon", "authorization messages", "FTP daemon", "NTP subsystem", "log audit", "log alert", "clock daemon (note 2)","local use 0", "local use 1", "local use 2", "local use 3", "local use 4", "local use 5", "local use 6", "local use 7"],data : [val[1].deviceMap["kernel messages"],val[1].deviceMap["user-level messages"],val[1].deviceMap["mail system"],val[1].deviceMap["system daemons"],val[1].deviceMap["security/authorization messages"],val[1].deviceMap["messages generated internally by syslogd"],val[1].deviceMap["line printer subsystem"],val[1].deviceMap["network news subsystem"],val[1].deviceMap["UUCP subsystem"],val[1].deviceMap["clock daemon"],val[1].deviceMap["authorization messages"],val[1].deviceMap["FTP daemon"],val[1].deviceMap["NTP subsystem"],val[1].deviceMap["log audit"],val[1].deviceMap["log alert"],val[1].deviceMap["clock daemon (note 2)"],val[1].deviceMap["local use 0"],val[1].deviceMap["local use 1"],val[1].deviceMap["local use 2"],val[1].deviceMap["local use 3"],val[1].deviceMap["local use 4"],val[1].deviceMap["local use 5"],val[1].deviceMap["local use 6"],val[1].deviceMap["local use 7"],val[1].deviceMap["user-level messages"]],color : colors[1]}},{name : val[2].name,y : parseInt(val[2].rate * 100),color : colors[2],//一级钻取drilldown : {type : 'pie',name : val[2].name,categories : ["kernel messages", "user-level messages", "mail system", "system daemons", "security/authorization messages", "messages generated internally by syslogd", "line printer subsystem", "network news subsystem","UUCP subsystem", "clock daemon", "authorization messages", "FTP daemon", "NTP subsystem", "log audit", "log alert", "clock daemon (note 2)","local use 0", "local use 1", "local use 2", "local use 3", "local use 4", "local use 5", "local use 6", "local use 7"],data : [val[2].deviceMap["kernel messages"],val[2].deviceMap["user-level messages"],val[2].deviceMap["mail system"],val[2].deviceMap["system daemons"],val[2].deviceMap["security/authorization messages"],val[2].deviceMap["messages generated internally by syslogd"],val[2].deviceMap["line printer subsystem"],val[2].deviceMap["network news subsystem"],val[2].deviceMap["UUCP subsystem"],val[2].deviceMap["clock daemon"],val[2].deviceMap["authorization messages"],val[2].deviceMap["FTP daemon"],val[2].deviceMap["NTP subsystem"],val[2].deviceMap["log audit"],val[2].deviceMap["log alert"],val[2].deviceMap["clock daemon (note 2)"],val[2].deviceMap["local use 0"],val[2].deviceMap["local use 1"],val[2].deviceMap["local use 2"],val[2].deviceMap["local use 3"],val[2].deviceMap["local use 4"],val[2].deviceMap["local use 5"],val[2].deviceMap["local use 6"],val[2].deviceMap["local use 7"],val[2].deviceMap["user-level messages"]],color : colors[2]}},{name : val[3].name,y : parseInt(val[3].rate * 100),color : colors[3],//一级钻取drilldown : {name : val[3].name,categories : ["kernel messages", "user-level messages", "mail system", "system daemons", "security/authorization messages", "messages generated internally by syslogd", "line printer subsystem", "network news subsystem","UUCP subsystem", "clock daemon", "authorization messages", "FTP daemon", "NTP subsystem", "log audit", "log alert", "clock daemon (note 2)","local use 0", "local use 1", "local use 2", "local use 3", "local use 4", "local use 5", "local use 6", "local use 7"],data : [val[3].deviceMap["kernel messages"],val[3].deviceMap["user-level messages"],val[3].deviceMap["mail system"],val[3].deviceMap["system daemons"],val[3].deviceMap["security/authorization messages"],val[3].deviceMap["messages generated internally by syslogd"],val[3].deviceMap["line printer subsystem"],val[3].deviceMap["network news subsystem"],val[3].deviceMap["UUCP subsystem"],val[3].deviceMap["clock daemon"],val[3].deviceMap["authorization messages"],val[3].deviceMap["FTP daemon"],val[3].deviceMap["NTP subsystem"],val[3].deviceMap["log audit"],val[3].deviceMap["log alert"],val[3].deviceMap["clock daemon (note 2)"],val[3].deviceMap["local use 0"],val[3].deviceMap["local use 1"],val[3].deviceMap["local use 2"],val[3].deviceMap["local use 3"],val[3].deviceMap["local use 4"],val[3].deviceMap["local use 5"],val[3].deviceMap["local use 6"],val[3].deviceMap["local use 7"],val[3].deviceMap["user-level messages"]],color : colors[3]}},{name : val[4].name,y : parseInt(val[4].rate * 100),color : colors[4],//一级钻取drilldown : {name : val[4].name,categories : ["kernel messages", "user-level messages", "mail system", "system daemons", "security/authorization messages", "messages generated internally by syslogd", "line printer subsystem", "network news subsystem","UUCP subsystem", "clock daemon", "authorization messages", "FTP daemon", "NTP subsystem", "log audit", "log alert", "clock daemon (note 2)","local use 0", "local use 1", "local use 2", "local use 3", "local use 4", "local use 5", "local use 6", "local use 7"],data : [val[4].deviceMap["kernel messages"],val[4].deviceMap["user-level messages"],val[4].deviceMap["mail system"],val[4].deviceMap["system daemons"],val[4].deviceMap["security/authorization messages"],val[4].deviceMap["messages generated internally by syslogd"],val[4].deviceMap["line printer subsystem"],val[4].deviceMap["network news subsystem"],val[4].deviceMap["UUCP subsystem"],val[4].deviceMap["clock daemon"],val[4].deviceMap["authorization messages"],val[4].deviceMap["FTP daemon"],val[4].deviceMap["NTP subsystem"],val[4].deviceMap["log audit"],val[4].deviceMap["log alert"],val[4].deviceMap["clock daemon (note 2)"],val[4].deviceMap["local use 0"],val[4].deviceMap["local use 1"],val[4].deviceMap["local use 2"],val[4].deviceMap["local use 3"],val[4].deviceMap["local use 4"],val[4].deviceMap["local use 5"],val[4].deviceMap["local use 6"],val[4].deviceMap["local use 7"],val[4].deviceMap["user-level messages"]],color : colors[4]}}, { name : val[5].name,y : parseInt(val[5].rate * 100),color : colors[5],//一级钻取drilldown : {name : val[5].name,categories : ["kernel messages", "user-level messages", "mail system", "system daemons", "security/authorization messages", "messages generated internally by syslogd", "line printer subsystem", "network news subsystem","UUCP subsystem", "clock daemon", "authorization messages", "FTP daemon", "NTP subsystem", "log audit", "log alert", "clock daemon (note 2)","local use 0", "local use 1", "local use 2", "local use 3", "local use 4", "local use 5", "local use 6", "local use 7"],data : [val[5].deviceMap["kernel messages"],val[5].deviceMap["user-level messages"],val[5].deviceMap["mail system"],val[5].deviceMap["system daemons"],val[5].deviceMap["security/authorization messages"],val[5].deviceMap["messages generated internally by syslogd"],val[5].deviceMap["line printer subsystem"],val[5].deviceMap["network news subsystem"],val[5].deviceMap["UUCP subsystem"],val[5].deviceMap["clock daemon"],val[5].deviceMap["authorization messages"],val[5].deviceMap["FTP daemon"],val[5].deviceMap["NTP subsystem"],val[5].deviceMap["log audit"],val[5].deviceMap["log alert"],val[5].deviceMap["clock daemon (note 2)"],val[5].deviceMap["local use 0"],val[5].deviceMap["local use 1"],val[5].deviceMap["local use 2"],val[5].deviceMap["local use 3"],val[5].deviceMap["local use 4"],val[5].deviceMap["local use 5"],val[5].deviceMap["local use 6"],val[5].deviceMap["local use 7"],val[5].deviceMap["user-level messages"]],color : colors[5]}},{name : val[6].name,y : parseInt(val[6].rate * 100),color : colors[6],//一级钻取drilldown : {name : val[6].name,categories : ["kernel messages", "user-level messages", "mail system", "system daemons", "security/authorization messages", "messages generated internally by syslogd", "line printer subsystem", "network news subsystem","UUCP subsystem", "clock daemon", "authorization messages", "FTP daemon", "NTP subsystem", "log audit", "log alert", "clock daemon (note 2)","local use 0", "local use 1", "local use 2", "local use 3", "local use 4", "local use 5", "local use 6", "local use 7"],data : [val[6].deviceMap["kernel messages"],val[6].deviceMap["user-level messages"],val[6].deviceMap["mail system"],val[6].deviceMap["system daemons"],val[6].deviceMap["security/authorization messages"],val[6].deviceMap["messages generated internally by syslogd"],val[6].deviceMap["line printer subsystem"],val[6].deviceMap["network news subsystem"],val[6].deviceMap["UUCP subsystem"],val[6].deviceMap["clock daemon"],val[6].deviceMap["authorization messages"],val[6].deviceMap["FTP daemon"],val[6].deviceMap["NTP subsystem"],val[6].deviceMap["log audit"],val[6].deviceMap["log alert"],val[6].deviceMap["clock daemon (note 2)"],val[6].deviceMap["local use 0"],val[6].deviceMap["local use 1"],val[6].deviceMap["local use 2"],val[6].deviceMap["local use 3"],val[6].deviceMap["local use 4"],val[6].deviceMap["local use 5"],val[6].deviceMap["local use 6"],val[6].deviceMap["local use 7"],val[6].deviceMap["user-level messages"]],color : colors[6]}},{name : val[7].name,y : parseInt(val[7].rate * 100),color : colors[7],//一级钻取drilldown : {name : val[7].name,categories : ["kernel messages", "user-level messages", "mail system", "system daemons", "security/authorization messages", "messages generated internally by syslogd", "line printer subsystem", "network news subsystem","UUCP subsystem", "clock daemon", "authorization messages", "FTP daemon", "NTP subsystem", "log audit", "log alert", "clock daemon (note 2)","local use 0", "local use 1", "local use 2", "local use 3", "local use 4", "local use 5", "local use 6", "local use 7"],data : [val[7].deviceMap["kernel messages"],val[7].deviceMap["user-level messages"],val[7].deviceMap["mail system"],val[7].deviceMap["system daemons"],val[7].deviceMap["security/authorization messages"],val[7].deviceMap["messages generated internally by syslogd"],val[7].deviceMap["line printer subsystem"],val[7].deviceMap["network news subsystem"],val[7].deviceMap["UUCP subsystem"],val[7].deviceMap["clock daemon"],val[7].deviceMap["authorization messages"],val[7].deviceMap["FTP daemon"],val[7].deviceMap["NTP subsystem"],val[7].deviceMap["log audit"],val[7].deviceMap["log alert"],val[7].deviceMap["clock daemon (note 2)"],val[7].deviceMap["local use 0"],val[7].deviceMap["local use 1"],val[7].deviceMap["local use 2"],val[7].deviceMap["local use 3"],val[7].deviceMap["local use 4"],val[7].deviceMap["local use 5"],val[7].deviceMap["local use 6"],val[7].deviceMap["local use 7"],val[7].deviceMap["user-level messages"]],color : colors[7]}}];//初始化图表Fvar chart = new Highcharts.Chart('testHighChats', {chart : {renderTo : 'container',type : 'pie'},title : {text : 'syslog'},subtitle : {text : '点击按钮返回饼图'},xAxis : {categories : categories},yAxis : {title : {text : '占比'}},credits : {position : {align : 'right', //水平居右verticalAlign : 'bottom' //垂直底部},style : {cursor : 'pointer', //鼠标样式为手型color : '#FF0000', //字体颜色fontSize : '10px' //字体大小}},plotOptions : {pie : {cursor : 'pointer',point : {events : {click : function() {//根据是否进入钻取的状态重绘不同的图表var drilldown = this.drilldown;if (drilldown) { // drill downsetChart(drilldown.name, drilldown.categories,drilldown.data, drilldown.color);} else { // restorealert(name);setChart(name, categories, data);}}}},dataLabels : {enabled : true,color : colors[0],style : {fontWeight : 'bold'},formatter : function() {return this.y + '%';}}}},tooltip : {headerFormat: '<span style="font-size:11px">{series.name}</span><br>', pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'},series : [ {name : name,data : data,color : 'white'} ],exporting : {enabled : false}});//根据相关图表参数重绘highcharts图表function setChart(name, categories, data, color) { //动态修改Categories chart.xAxis[0].setCategories(categories, false); //移除之前序列 如果有多个可以用for逐个移除 chart.series[0].remove(false); //添加新的序列 chart.addSeries({ name: name, type : 'column', data: data, color: color || 'white' }, false); //重绘图表 chart.redraw();}}});}</script> 0 0
- 前端之echarts与highcharts的使用
- echarts与highcharts使用经验
- ECharts与Highcharts图表比较
- highcharts的封装与使用！
- highcharts的封装与使用！
- Echarts的配置与使用
- 前端数据可视化插件:Highcharts、Echarts和D3
- highcharts和echarts图表的异同
- 【WEB前端】eCharts 使用笔记
- Web前端高级报表工具的使用：ECharts图表工具
- Web前端echarts插件的基础使用，创建报表组件。
- Echarts与ajax的联合使用
- ECharts和HighCharts对比
- extjs echarts highcharts 饼图
- echarts和highcharts区别
- Highcharts vs Echarts
- 互动图表Highcharts,ECharts
- 图表到项目的简单集成（Echarts 和 HighCharts）
- 字体
- ICM Technex 2017 and Codeforces Round #400 (Div. 1 + Div. 2, combined) C. Molly's Chemicals
- AS小技巧「Extract Resource」快捷提取字符串
- HTML中显示特殊字符，如尖括号 “<”,">"等等
- 浅谈Java中的equals和==
- 前端之echarts与highcharts的使用
- ionic 环境搭建
- 关于static（持续跟进中）
- 745A Hongcow Learns the Cyclic Shift
- 【生活】命里只有八分米，走遍天下不满升什么意思
- jQuery诞生记-原理与机制
- 第一个Android程序
- vue移动端项目解决 延迟点击
- activity，window,view
