CODE大全
您的位置 : 首页 > 前端技术 >

SVG 图表插件 charts 教程

发布时间:『 2018-01-12
http://www.bdx-leb.com/1201/df56b1559956.html

frappe 是一个简单,敏感,现代的SVG图http://www.bdx-leb.com/045b/b6ad014cfa1a.html表插件,具有零依赖性,即它可以单独使用,不依赖其他任何js库。本文介绍它的用法。

目前 frappe charts 在 github 上已有4000多http://www.bdx-leb.com/b7d6/79f269d395f9.html颗星。

安装

frapphttp://www.bdx-leb.com/f447/14380d8a1a4b.htmle 的安装有两种方法。方法一是通过 npm 安装。

$ npm install frappe-charts

方法二是直接在网页中引用它。

<script src="https://raw.githubusercontent.com/frappe/charts/master/dist/frappe-charts.min.js"></script>

http://www.bdx-leb.com/e830/4ca4c6b0a1e6.html 用法

看下面一个而简单的例子。

const data = {
    labels: ["12am-3am", "3am-6pm", http://www.bdx-leb.com/c736/b3a946c8af55.html"6am-9am", "9am-12am",
        "12pm-3pm", "3pm-6pm", "6pm-9pm", &quhttp://www.bdx-leb.com/1666/4a54498e4b73.htmlot;9am-12am"
    ],
    datasets: [
        {
            titlehttp://www.bdx-leb.com/8973/6856d403b786.html: "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 http://www.bdx-leb.com/e15a/5aa41d81a7c2.html cd 进入项目目录 npm install npm run dev

Frappe图表

http://www.bdx-leb.com/f1e1/968455011392.html图就是官方demo的运行效果。


——— 全文完 ———
Powered by 张鑫旭 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 张鑫旭 版权所有