Chart.js 轻量级HTML5图表绘制工具库(知识整理)

时间:2021-05-28

Chart.js:用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕上。基于HTML5 canvas技术,Chart.js不依赖任何外部工具库,轻量级(压缩之后仅有4.5k)。值得推荐学习!

GitHub源码: https://github.com/nnnick/Chart.js

Chart.js文档:http://plete: function() {//动画完成后显示对应的数据 var ctx = this.chart.ctx; ctx.font = this.scale.font; ctx.fillStyle = this.scale.textColor; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; this.datasets.forEach(function(dataset) { dataset.bars.forEach(function(bar) { ctx.fillText(bar.value, bar.x, bar.y); }); }); } }); var legend = document.getElementById('legend'); // 图例 legend.innerHTML = barChart.generateLegend(); } //数据结构: var data = { labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"], datasets: [{ fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,1)", data: [65, 59, 90, 81, 56, 55, 40], label: "本月销售额"//图例标签 },{ fillColor: "#69D2E7", strokeColor: "#B2E5ED", data: [54, 99, 72, 61, 86, 65, 84], label: "本季度销售额" }] };

效果图:

总结:

Chart.js中的六种图表,js部分大致分为数据结构、图表参数(通用参数以及各自特有参数)和实例化引用三大部分,而数据的动态加载可在数据结构中的data属性传入json等数据文件或变量。在多处实战中可能需要用到数据图表,呈现给用户更好的用户体验,此次学习简记以便日后复习、使用!希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章