Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。
支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图。
经过多年的开发和维护拥有着丰富的图表功能和稳定的性能以及专业详细的开发文档上手极其容易,展现出来也是极其的美观简约大气,相比与echarts有完整的实例演示,功能介绍和详细的api文档。
网址:
五分钟上手代码
三分钟上手Highcharts 图表
1:Highcharts柱状图宽度
如何修改Highcharts柱状图柱子的宽度:pointWidth:5 //柱子之间的距离值设置这个属性
series: [{ name: '温度', data: [ [1, 2], [2, 5], [5, 9], ], pointWidth:5 //柱子之间的距离值 }]
2:ajax数据交互示例代码
$.ajax({ url : "/bison/signIn/count/countOrgan", async : false, data : { beginDate : $("#beginTime").val(), endDate : $("#endTime").val(), personSex : $("#personSex").val(), organIds : getOrganIds(), signSetId : $("#signSet option:selected").val(), }, type : 'POST', dataType : 'json', success : function(data) { // 成功时执行的回调方法 category_data = data.returnData.response.categor; natural_data = data.returnData.response.normalList; late_data = data.returnData.response.lateList; absent_data = data.returnData.response.absentList; fun(category_data, natural_data, late_data, absent_data); }, error : erryFunction // 错误时执行方法 });