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

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

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

GitHub精选 | 一个免费的HTML5报表配置工具

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

  • 柱状图
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]

}

]

};
GitHub精选 | 一个免费的HTML5报表配置工具
  • 雷达图
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]

}

]

};
GitHub精选 | 一个免费的HTML5报表配置工具

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

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

内容出处:,

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

发表评论

登录后才能评论