之前有个项目需要使用图表,于是乎讯找了几个比较流行的chart框架,挑选出来几个比较不错的框架进行记录方便以后使用。
首先介绍一下百度的框架echarts,毕竟我还是很爱国的。
echarts为百度编写的一款开源框架,在移动端也兼容,mui框架就使用的这款chart。
echarts的优点是:
1.国人开发,文档全,便于开发和阅读文档。
2.图表丰富,可以适用各种各样的功能。
echarts的缺点:
移动端使用略卡,毕竟是PC端的东西,移植到移动端肯定多多少少有些问题吧,或许跟自己水平也有一定的关系,哎怎么说呢。
echarts不失为一款比较适合我们这种码农使用的框架。
echarts就不贴代码了。毕竟文档很全。
highcharts
优点:
1.美观,功能强大。
2.图表丰富度基本跟echarts没啥区别。
缺点:
1.需要jQuery支持不够灵活。
2.老外开发的中文文档不全。
贴一段柱形图代码来说明几个比较重要的highchart属性
$('#dzprdy').highcharts({//柱状图2
chart: {
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,原因很简单,就是流畅,用户体验比较好,毕竟做软件就是给用户使用的,如果用户体验不好那么你这个应用就是失败的。哪怕功能少,哪怕是英文文档,也要克服种种困难用好它才是一个程序猿应该做的事情。