前端之echarts与highcharts的使用
2017-02-24 10:23
218 查看
左图
¯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;
}
}
<%@ 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><div
style="border-style: solid; width: 700px; height: 550px; border-color: black; border-width: 1px"
id="testEcharts"></div></td>
<td><div
style="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]
}
}];
//初始化图表F
var 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 down
setChart(drilldown.name, drilldown.categories,
drilldown.data, drilldown.color);
} else { // restore
alert(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>
¯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><div
style="border-style: solid; width: 700px; height: 550px; border-color: black; border-width: 1px"
id="testEcharts"></div></td>
<td><div
style="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]
}
}];
//初始化图表F
var 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 down
setChart(drilldown.name, drilldown.categories,
drilldown.data, drilldown.color);
} else { // restore
alert(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>
相关文章推荐
- Web前端echarts插件的基础使用,创建报表组件。
- 前端数据可视化插件:Highcharts、Echarts和D3
- 【WEB前端】eCharts 使用笔记
- 画图工具除了echarts我使用highcharts
- 前端知识 | 浅谈在React中使用echarts
- 前端数据可视化echarts.js使用指南
- 【前端】大数据时代的图表可视化利器——Highcharts,D3和百度的Echarts
- 一点点前端代码,使用ECharts插入柱状图
- echarts与highcharts使用经验
- 【WEB前端】使用百度ECharts,绘制项目质量报表
- 使用Fiddler提高前端工作效率 (实例篇)
- WEB前端——使用Javascript判断客户端浏览器类型
- 前端使用Jquery的getJSON方法,后台使用PHP,解决IE和火狐Firefox中存在的跨域ajax请求问题。
- 配置Exchange服务器使用ISA防火墙作为它的前端主机(Smart Host)
- [前端优化] 使用Combres合并对js、css文件的请求
- WEB前端——使用Javascript判断客户端浏览器类型
- [前端优化]使用Microsoft Ajax Minifier对资源文件进行压缩优化
- [开发知识点] 使用JQuery 将DataTable 转化成JSON数据,前端无法处理JSON数据的注意事项
- 【转载】使用Fiddler提高前端工作效率 (实例篇)
- 使用Fiddler提高前端工作效率