之前有个项目需要使用图表,于是乎讯找了几个比较流行的chart框架,挑选出来几个比较不错的框架进行记录方便以后使用。
首先介绍一下百度的框架echarts,毕竟我还是很爱国的。
echarts为百度编写的一款开源框架,在移动端也兼容,mui框架就使用的这款chart。
echarts的优点是:
1.国人开发,文档全,便于开发和阅读文档。
2.图表丰富,可以适用各种各样的功能。
echarts的缺点:
移动端使用略卡,毕竟是PC端的东西,移植到移动端肯定多多少少有些问题吧,或许跟自己水平也有一定的关系,哎怎么说呢。
echarts不失为一款比较适合我们这种码农使用的框架。
echarts就不贴代码了。毕竟文档很全。
highcharts
优点:
1.美观,功能强大。
2.图表丰富度基本跟echarts没啥区别。
缺点:
1.需要jQuery支持不够灵活。
2.老外开发的中文文档不全。
贴一段柱形图代码来说明几个比较重要的highchart属性
$('#dzprdy').highcharts({//柱状图2chart: {type: 'column',//图表类型spacingBottom: 0,//底边距spacingLeft: 0,//左边距spacingRight: 0,//右边距spacingTop: 0,//上边距backgroundColor: '#B1D9FF'//背景色},title: {text: ''//图表主标题},subtitle: {text: ''//图表副标题},credits: {href: null,//右下角链接地址text: null//右下角链接文字},xAxis: {categories: [//横轴数据'1','2','3','4','5','6','7']},yAxis: {//title: {text: null, //侧标题},labels: {enabled: false//纵轴是否显示},gridLineColor: '#eaeaea',//纵轴颜色min: 0,纵轴最小值},tooltip: {//鼠标悬浮显示样式headerFormat: '<span style="font-size:10px">{point.key}</span><table>',//pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',footerFormat: '</table>',shared: true,useHTML: true},plotOptions: {series: {showInLegend: false//是否显示图例},column: {borderWidth: 0,//柱形图边框宽度pointWidth: 10<span style="font-family: Arial, Helvetica, sans-serif;">//柱形图宽度</span>}},series: [{//鼠标悬浮数据name: '计划电量',//数据名称data: [1000, 71.5, 800,123,323,123,312]//数据数值}]});
chart.js
优点:
1.轻量级,min版总大小50多k。
2.移动端使用比较流畅,毕竟小。
缺点:
1.功能欠缺比较多。
2.中文文档奇缺。
贴一段代码记录属性,该代码为管状图,表示完成率。
function index_canVas(obj, val) {var doughnutData = [{//管状图数据<span style="white-space:pre"></span>value: val,color: "#53eae1",}, {value: 100 - val,color: "#eaeaea",}];<span style="white-space:pre"></span>var ctx = obj.getContext("2d");//绘制图形的Element为传入的obj对象window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {percentageInnerCutout: inner,//环形图属性responsive: true,//showTooltips: false,//是否显示悬浮提示animation: false//动画效果是否开启});}
最后项目还是选择了chart.js,原因很简单,就是流畅,用户体验比较好,毕竟做软件就是给用户使用的,如果用户体验不好那么你这个应用就是失败的。哪怕功能少,哪怕是英文文档,也要克服种种困难用好它才是一个程序猿应该做的事情。