Chart.js：一个免费的HTML5报表配置工具

Vedu • 2021-08-06 06:39 • 资源分享 • 阅读 715

本期推荐的是一个使用H5 <canvas>标签绘制报表的框架——Chart.js。

报表作为日常汇报的一种工具，几乎所有企业都会用到，目前市面上主流的几款报表工具帆软、永洪、观远等，他们的基础功能都是免费的，但是想要和其他产品做集成的话都是要单独付费的。而Chart.js作为一款免费开源的报表产品，同样支持各种报表的制作。

下面是一个简单的配置示例：

柱状图

var myBarChart = new Chart(ctx).Bar(data, options);

var data = {

labels: ["January", "February", "March", "April", "May", "June", "July"],

datasets: [

{

label: "My First dataset",

fillColor: "rgba(220,220,220,0.5)",

strokeColor: "rgba(220,220,220,0.8)",

highlightFill: "rgba(220,220,220,0.75)",

highlightStroke: "rgba(220,220,220,1)",

data: [65, 59, 80, 81, 56, 55, 40]

},

{

label: "My Second dataset",

fillColor: "rgba(151,187,205,0.5)",

strokeColor: "rgba(151,187,205,0.8)",

highlightFill: "rgba(151,187,205,0.75)",

highlightStroke: "rgba(151,187,205,1)",

data: [28, 48, 40, 19, 86, 27, 90]

}

]

};

雷达图

var myRadarChart = new Chart(ctx).Radar(data, options);

var data = {

labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],

datasets: [

{

label: "My First dataset",

fillColor: "rgba(220,220,220,0.2)",

strokeColor: "rgba(220,220,220,1)",

pointColor: "rgba(220,220,220,1)",

pointStrokeColor: "#fff",

pointHighlightFill: "#fff",

pointHighlightStroke: "rgba(220,220,220,1)",

data: [65, 59, 90, 81, 56, 55, 40]

},

{

label: "My Second dataset",

fillColor: "rgba(151,187,205,0.2)",

strokeColor: "rgba(151,187,205,1)",

pointColor: "rgba(151,187,205,1)",

pointStrokeColor: "#fff",

pointHighlightFill: "#fff",

pointHighlightStroke: "rgba(151,187,205,1)",

data: [28, 48, 40, 19, 96, 27, 100]

}

]

};

另外，Chart.js同样支持数据抽取和动态图表等功能，感兴趣的同学可以到GitHub上了解一下。

GitHub：https://github.com/chartjs/Chart.js

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/26577.html

Chart.js：一个免费的HTML5报表配置工具

相关推荐

发表评论