前端开发:一个简单、响应迅速、无依赖的现代SVG图表(Charts)

Charts是一个开源（MIT协议）的图表库，使用简单、响应迅速，拥有线型、柱型、散点型、饼图、百分比简单的图表类型，满足你对图表的基本需求，压缩包仅15kB，是一个非常精简且轻量级的图表。

1、快速开始

https://github.com/frappe/charts

在github上下载项目，然后解压压缩文件，把dist文件夹下的文件放到你项目的任意位置，在你的HTML页面中引入frappe-charts.min.iife.js文件。

然后运行如下所示脚本代码，一个简单的柱状图表就生成了。

data变量是图表的数据，可以通过ajax动态获取生成图表。

通过new Chart(options)方法实例化：

• parent：值可以是一个选择器，也可以是一个DOM元素。

• type：图表类型，有'bar','line','scatter','pie','percentage'五个类型。

• colors：颜色，如果不设置，将使用默认排列顺序。['light-blue', 'blue', 'violet', 'red', 'orange', 'yellow', 'green', 'light-green', 'purple', 'magenta', 'grey', 'dark-grey']。

• format_tooltip_x、format_tooltip_y：分别是图表x轴和y轴的工具提示格式化方法。

2、其他类型图表

• 线型

• 散点型

• 饼图

• 百分比图
  

3、动态更新数值

• chart.update_values(datas,labels)：更新全部数值。

• chart.add_data_point(data,label,index)：指定位置添加一个数值点，默认添加到最后。

• remove_data_point(index)：移除一个指定位置数值点。

4、简单的聚合

目前只有简单的总数和平均数两个聚合数据。

• chart.show_sums()和chart.hide_sums()：显示、隐藏总数。

• chart.show_averages()和chart.hide_averages()：显示、隐藏平均数。

5、监听事件

chart.parent.addEventListener('data-select', function(e){console.log(e);});

监听数据选择事件，可以用来动态展示点击数据的详情。

这是一个简单的图标库，特点在于轻量级、加载速度快，如果你不需要Echarts那么丰富的图表，只需要一点简单的可以考虑一下Charts。

如果你有更好的、实用的插件想要和我们分享，请评论告诉我，感谢您的分享。