最近一个多月都在用highcart 做统计分析及展示,做个总结。本文主要写写自己的一些过程:
- highchart VS echarts
- DEMO
- 万能方法
- 相关点
highcharts VS echarts
- 稳定性
- 兼容性
- 官方DEMO
- API
- 美观程度
- 特性
在选图表用哪个框架的时候 ,最终在这两个之间决定的。稳定性和兼容性以及API,DEMO 两者都很完备的。但我在highcharts 官网看了不到半天就做成了demo。可想highcharts 多么容易上手。
之后考虑美观程度,个人感觉还是highcharts 更胜一筹,看起来更舒服一些。
特性的话,两者绘图highcharts是基于svg技术的,而echarts基于canvas,两者技术基础完全不一样,各有特点。而后者是可以在浏览器实现3D图形的,这种效果highcharts是完全不可能做得到的(我没有实践)。echarts展示: Earth with sun light and universe
基于上,考虑到项目应用并没有涉及3D等效果,且highcharts好看又好上手。采用了highcharts。
扔个链接自行体会。http://www.hcharts.cn/demo/highcharts/ (但官网有时候会403。。)
DEMO
应用到的js,注意highcharts-zh_CN要放在最下边。同时这三个应用的是jQuery v1.8.3 .js
<script type="text/javascript" src="#springUrl('')/js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="#springUrl('')/js/highcharts/exporting.js"></script>
<script type="text/javascript" src="#springUrl('')/js/highcharts/highcharts-zh_CN.js"></script>
页面
<div id="chart_in_out" >
数据准备:
function findInAndOut() {
try {
$.ajax({
url: "new/chartInAndOut?num=" + queryCount,
type: "post",
timeout: 2000,
async: true,
cache: false,
success: function (result) {
var ENTRY_IN = new Array(0);
var TRANSFER_IN = new Array(0);
var TRANSFER_OUT = new Array(0);
var DIMISSION_OUT = new Array(0);
var END_YEAR_MONTH = new Array(0);
var temleftMonth = leftMonth;
if (result && result.length > 0) {
for (var i = 7; i >= 0; i--) {
for (var j = result.length - 1; j >= 0; j--) {
if (result[j].END_YEAR_MONTH) {
if (result[j].END_YEAR_MONTH.toString().substring(5, 7) == temleftMonth) {
ENTRY_IN.push(Number(result[j].ENTRY_IN));
TRANSFER_IN.push(Number(result[j].TRANSFER_IN));
TRANSFER_OUT.push(Number(result[j].TRANSFER_OUT));
DIMISSION_OUT.push(Number(result[j].DIMISSION_OUT));
END_YEAR_MONTH.push(result[j].END_YEAR_MONTH.toString().substring(5, 7) + "月");
break;
}
}
}
...
}
}
}
var series = new Array(0);
series.push({
name: '入职',
data: ENTRY_IN,
stack: 'in',
color: c5color,
maxPointWidth: maxWidth
});
series.push({
name: '转入',
data: TRANSFER_IN,
stack: 'in',
color: c6color,
maxPointWidth: maxWidth
});
series.push({
name: '转出',
data: TRANSFER_OUT,
stack: 'out',
color: c7color,
maxPointWidth: maxWidth
});
series.push({
name: '离职',
data: DIMISSION_OUT,
stack: 'out',
color: c8color,
maxPointWidth: maxWidth
});
drowcolumnsymple(chart_in_out, "入离调转(人)", "", END_YEAR_MONTH, series, '人');
$(".highcharts-credits").hide();//注释显示的highchart
}
});
} catch (e) {
}
}
显示方法:(需要哪个特性直接从API/DEMO中拿过来)
function drowcolumnsymple(chartID, title, yAxisTitle, xCategories, Data1, unit) {
var series = Data1;
try {
var options = {
chart: {
renderTo: chartID,
type: 'column'
},
title: {
text: title,
align: titleAlign,
style: {
fontSize: titleSize
}
},
xAxis: {
categories: xCategories,
title: {
text: null
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: yAxisTitle,
align: titleAlign
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + unit;
}
} ,
plotOptions: {
column: {
stacking: 'normal'
}
},
series: series
};
var chart = new Highcharts.Chart(options);
}
catch (e) {
}
}
保守的说drowcolumnsymple的这个方法 基本也是万能的了。
此外,对颜色的支持方式也是非常好。
colors = Highcharts.getOptions().colors;
colors2 =Highcharts.Color(colors[0]).brighten(i / 30).get();
colors3=”rgb(108,123,246)”;
colors4=”#FFFAEF”
友情提示:
数组需要数值类型。可能需要强转。