免费开源、轻量无依赖的 web 图表库

程序员老鱼

发布于 2023-09-07 08:51:50

8250

文章被收录于专栏：前端实验室前端实验室

我们在项目中会遇到很多图表相关的需求，Github 有很多图表库，今天推荐一个小巧的图表库，基于 SVG 生成图表，使用很简单。

Frappe Charts

Frappe Charts 是一个小巧简单的 JavaScript 图表库，通过简单几个参数，可以快速生成类似于 Github 那样美观大气的图表。

轻量级且没有任何依赖的一个图标库，可以搭配 Vue 、 React 等框架使用。

Frappe Charts 是基于 SVG 生成图表，性能方面要比常用的 Canvas 图表要好的多，而且无任何依赖，gzip压缩后只有 18K，该有的功能都有，体验非常不错。

如何使用

安装

$ npm install frappe-charts

引入依赖

方式：
import { Chart } from "frappe-charts"

import 'frappe-charts/dist/frappe-charts.min.css'

<script src="https://unpkg.com/frappe-charts@1.6.1/dist/frappe-charts.min.umd.js"></script>

案例

import { Chart } from "frappe-charts"

const data = {
    labels: ["周一", "周二", "周三", "周四","周五", "周六", "周日"],
    datasets: [
        {
            name: "销量", chartType: "bar",
            values: [500, 3400, 2300, 650, 380, 120, 701]
        },
        {
            name: "注册量", chartType: "line",
            values: [2500, 5000, 3100, 1589, 1823, 3245, 2787]
        }
    ]
}

const chart = new Chart("#chart", {  
    title: "周销量表",
    data: data,
    type: 'axis-mixed',
    height: 250,
    colors: ['#1d953f', '#f58220']
})