highcharts 小结

最近一个多月都在用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”

友情提示：
数组需要数值类型。可能需要强转。