frappe 是一个简单,敏感,现代的SVG图表插件,具有零依赖性,即它可以单独使用,不依赖其他任何 js 库。本文介绍它的用法。
更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏
目前 frappe charts 在 github 上已有 4000 多颗星。
安装
frappe 的安装有两种方法。方法一是通过 npm 安装。
$ npm install frappe-charts
方法二是直接在网页中引用它。
<script src="https://raw.githubusercontent.com/frappe/charts/master/dist/ frappe-charts.min.js"></script>
用法
看下面一个而简单的例子。
const data = { labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am" ], datasets: [ { title: "Some Data", color: "light-blue", values: [25, 40, 30, 35, 8, 52, 17, -4] }, { title: "Another Set", color: "violet", values: [25, 50, -10, 15, 18, 32, 27, 14] } ] } const chart = new Chart({ parent: '#chart', title: "My Awesome Chart", data: data, type: 'bar', // or 'line', 'scatter', 'percentage' height: 250 })
你可以直接克隆 github 上带源码,运行它的 demo。用法如下:
- clone 这个项目 https://github.com/frappe/charts.git
- cd 进入项目目录
- npm install
- npm run dev
上图就是官方 demo 的运行效果。
更多 svg 的实现实例:
1、《SVG 如何实现 3 选项按钮?》
3、《SVG 实现多彩圆环倒计时效果》
【注:本文源自网络文章资源,由站长整理发布】