后台统计分析报表工具highcharts

来源：互联网发布：淘宝网答题编辑：程序博客网时间：2024/04/28 01:22

Highcharts是一款纯javascript编写的图表库更多关于highcharts请查看http://www.hcharts.cn/网站学习

例子如下：

1.去官网下载highcharts.js 下载地址：http://www.highcharts.com/download/

2.在页面中加入highcharts.js

3.在页面定义图库显示的地方

4.就是主要的信息了，编写js

var timeChart;
var opreatChart;
var successRateChart;
$(function(){
getDataAcess();
});
//效能分析系统分析ajax请求
function getDataAcess(){
var url = workPath + "data/sysOpreatChart.do";
//TODO模块名称、方法名称、接口类型进行获取
var data = {
"startDate" : $('#startDate').val(),
"endDate":$('#endDate').val(),
"reqType":$("#reqType").val(),
"modulName":$("#modulName").val(),
"methodName":$("#methodName").val(),
"endMethodName":$("#endMethodName").val()
};
CommonUtils.post(url , data, function(json){
createChart(json);
},"json");
}
//效能分析刷新
function functionDataAcessRefresh(){
if(CommonUtils.isBlank($('#startDate').val())||CommonUtils.isBlank($('#endDate').val())){
alert("时间范围不能为空");
return ;
}
getDataAcess();
}
//根据json数据创建报表
function createChart(json) {
var timeMaxCount = 0;
var timeJson=json.timeLists;
//时间统计
for(var i =0 ; i<timeJson[1].length;i++){
if(timeMaxCount < timeJson[1][i]){
timeMaxCount = timeJson[1][i];
}
}
var chartName = "";
var chartAllName = "能耗(ms)";
timeMaxCount = CommonUtils.calMax(timeMaxCount);
var colors = Highcharts.getOptions().colors,
categories = [chartAllName, chartName],

//创建chart
timeChart = new Highcharts.Chart({
chart: {
renderTo: 'acessTime'
},
title: {
text: null
},
xAxis: {
categories: timeJson[0]
},
yAxis: {
title: {
text: null
},
min:0
},
legend: {
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderWidth: 1
},
tooltip: {
crosshairs: true,
shared: true
},
credits : {
enabled : false
},
plotOptions: {
pie: {
shadow: false
}
},
series: [
{
type: 'spline',
name: chartAllName,
data: timeJson[1],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[2],
fillColor: 'white'
}
}]
});

//访问量统计
var opreaJson=json.opreateLists;
var opreaMaxCount=0;
//时间统计
for(var i =0 ; i<opreaJson[1].length;i++){
if(opreaMaxCount < opreaJson[1][i]){
opreaMaxCount = opreaJson[1][i];
}
}
timeMaxCount = CommonUtils.calMax(timeMaxCount);
var colors = Highcharts.getOptions().colors,
categories = [chartAllName, chartName],

//创建chart
opreatChart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: null
},
xAxis: {
categories: opreaJson[0]
},
yAxis: {
title: {
text: null
},
min:0
},
legend: {
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderWidth: 1
},
tooltip: {
crosshairs: true,
shared: true
},
credits : {
enabled : false
},
plotOptions: {
pie: {
shadow: false
}
},
series: [
{
type: 'spline',
name: "访问量(次)",
data: opreaJson[1],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[2],
fillColor: 'white'
}
}]
});
//成功率统计

var successRateNum=json.sucessRates;
var errorRateNum=100-successRateNum;
successRateChart = new Highcharts.Chart({
chart: {
renderTo: 'successRate',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
colors:[
'green',
'red'
],
title: {
text: $("#startDate").val()+"到"+$("#endDate").val()+"时间段内接口成功率"
},
tooltip: {
crosshairs: true,
shared: true
},
credits : {
enabled : false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [
{
type: 'pie',
name: "百分比",
data:[
['成功('+successRateNum+'%)', successRateNum],
['失败('+errorRateNum+'%)',errorRateNum]
]

}]
});

}
//导出报表数据
function exportBusinessAnalyze(){
if(CommonUtils.isBlank($('#startDate').val())||CommonUtils.isBlank($('#endDate').val())){
alert("时间范围不能为空");
return ;
}
var url = workPath + "analysis/exportBusinessAnalize.do?startDate="+$('#startDate').val()+"&endDate="+$('#endDate').val()+"&bussType="+bussType;
CommonUtils.downLoadFile(url);
}

0 0