報表通用格式(eachar,highchars)通用
第一步,先將需要展示的數據封裝成下面方式
數據格式爲:
[
{
"xAxis":"所有科室",
"yAxis":[
{"name":"報修量","value":"100"},
{"name":"完修量","value":"50"},
{"name":"維修總費用","value":"15"},
{"name":"緊急單數","value":"2"},
{"name":"維修總工時","value":"56"}
]
},{
"xAxis":"急診科",
"yAxis":[
{"name":"報修量","value":"130"},
{"name":"完修量","value":"20"},
{"name":"維修總費用","value":"10"},
{"name":"緊急單數","value":"2"},
{"name":"維修總工時","value":"53"}
]
}
]
第二步,在將上面的數據封裝成插件需要的格式
//得到折線圖
function getComunLine(){
var dataJSON = getLineObj(); //得到上面的數據JSON,
var xAxis = []; //報表的x軸 xAxis
var yAxis = []; //報表的y軸 series
//封裝X軸值
for(var i=0;i<dataJSON.length;i++){
xAxis.push(dataJSON[i].xAxis); //對應X軸值
}
//封裝Y軸值
var index = 0;
for(var i = 0;i < dataJSON[0].yAxis.length; i++){ //每一次的第一列的數量和名稱都是固定的
var scz = {};
scz.name = dataJSON[0].yAxis[index].name;
scz.type = 'line';
scz.stack = '總量';
//封裝Y軸值
var da = [];
for(var j = 0; j < xAxis.length; j++){ //2
if(dataJSON[j].yAxis[index]){
da.push(Number(dataJSON[j].yAxis[index].value)); //值
}else{
da.push(0); //沒有值的補充爲 0
}
}
scz.data = da;
yAxis.push(scz); //對應y軸值
index++;//當前索引加 1
}
//調用折線圖方法 第一個參數,div顯示的容器,第二個是title,第三個是X軸,第四個是Y軸
eachatsReport('container',"維修報表統計",xAxis,yAxis);
}
第三步,調用插件方法即可
function eachatsReport(container,title,xAxis,yAxis){
//添加折現圖
Highcharts.chart(container, {
chart: {
type: 'line'
},
title: {
text:title
},
xAxis: {
//categories: ['admin','賴*蕾', '周*明', '倪*強', '高*巍','朱明']
categories: xAxis
},
yAxis: {
title: {
text: 'value',
style: {
color: '#006400',
fontSize : '14px'
}
}
},
credits:{enabled:false},
plotOptions: {
line: {
dataLabels: {
enabled: true, // 開啓數據標籤
formatter: function() {
return this.y + '' ;
}
},
enableMouseTracking: true // 關閉鼠標跟蹤,對應的提示框、點擊事件會失效
}
},
// series:[{
// name: 'admin',
// data: [43934, 52503, 57177, 69658, 97031,48]
// }, {
// name: '賴*蕾',
// data: [24916, 24064, 29742, 29851, 32490,95]
// }, {
// name: '周*明',
// data: [11744, 17722, 16005, 19771, 20185,62]
// }, {
// name: '倪*強',
// data: [78,0, 7988, 12169, 15112,4825]
// }, {
// name: '高*巍',
// data: [12908, 5948, 8105, 11248, 8989,682]
// },{
// name: '朱明',
// data: [12908, 5948, 8105, 11248, 8989,682
// }]
series:yAxis
});
}
效果:由於是數據關係,所以這裏效果圖就不實際展示了,