第一句子网 - 唯美句子、句子迷、好句子大全
第一句子网 > echart highcharts chart.js等chart属性记录

echart highcharts chart.js等chart属性记录

时间:2020-05-09 17:12:14

相关推荐

echart highcharts chart.js等chart属性记录

之前有个项目需要使用图表,于是乎讯找了几个比较流行的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,原因很简单,就是流畅,用户体验比较好,毕竟做软件就是给用户使用的,如果用户体验不好那么你这个应用就是失败的。哪怕功能少,哪怕是英文文档,也要克服种种困难用好它才是一个程序猿应该做的事情。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。