charts README

The project's README from github.com/frappe/charts. As one markdown file: README.md.

charts-logo

Frappe Charts

GitHub-inspired modern, intuitive and responsive charts with zero dependencies

Explore Demos - Edit at CodeSandbox - Documentation

Frappe Charts

Frappe Charts is a simple charting library with a focus on a simple API. The design is inspired by various charts you see on GitHub.

Motivation

ERPNext needed a simple sales history graph for its user company master to help users track sales. While using c3.js for reports, the library didn’t align well with our product’s classic design. Existing JS libraries were either too complex or rigid in their structure and behavior. To address this, I decided to create a library for translating value pairs into relative shapes or positions, focusing on simplicity.

Key Features

Usage

npm install frappe-charts

Import in your project:

import { Chart } from 'frappe-charts'
// or esm import
import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js'
// import css
import 'frappe-charts/dist/frappe-charts.min.css'

Or directly include script in your HTML

<script src="https://unpkg.com/[email protected]/dist/frappe-charts.min.umd.js"></script>

const data = {
    labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
        "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
    ],
    datasets: [
        {
            name: "Some Data", chartType: "bar",
            values: [25, 40, 30, 35, 8, 52, 17, -4]
        },
        {
            name: "Another Set", chartType: "line",
            values: [25, 50, -10, 15, 18, 32, 27, 14]
        }
    ]
}

const chart = new frappe.Chart("#chart", {  // or a DOM element,
                                            // new Chart() in case of ES6 module with above usage
    title: "My Awesome Chart",
    data: data,
    type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
    height: 250,
    colors: ['#7cd6fd', '#743ee2']
})

Contributing

  1. Clone this repo.
  2. cd into project directory
  3. npm install
  4. npm i npm-run-all -D (optional --> might be required for some developers)
  5. npm run dev


Frappe Technologies

charts (frappe/charts)

Searching Database…

15.1K ·GitHub
Charts
这是干什么的？Frappe Charts 是一个轻量级的 JavaScript 图表库，以 SVG 的形式渲染简洁、自适应的图表，而且没有任何依赖。
这是托管服务，还是需要嵌入我自己页面的库？它是一个库：你可以把它导入到项目里，或在 HTML 中加一个 script 标签，图表就会直接在浏览器里以 SVG 的形式渲染出来。
怎么把它加到项目里？导入安装好的包，或直接在 HTML 中引入 script 标签。如果想参与开发这个库本身，就克隆仓库，运行 npm install，然后运行 npm run dev。
它会引入其他库吗？不会——零依赖是它的主打特点，所以不需要提前安装别的东西。
它能画哪些类型的图表？支持柱状图、折线图、面积图等坐标轴图表，还有混合坐标轴图、饼图、百分比图和热力图。你还可以在图表上添加 x 轴和 y 轴标记线、高亮区域以及悬浮提示。
作者为什么不直接用 c3.js，而要新写一个图表库？ERPNext 需要一个简单的销售历史图表，但 c3.js 和产品的经典设计风格不搭，其他 JS 库又显得太复杂或太死板。于是作者写了一个小而专的库，专注于把数值对转换成简单的图形和位置。
图表已经显示在页面上之后，还能更新数据吗？可以——你可以就地添加、删除或更新单个数据点，也可以整体刷新数据集。颜色、动画和自定义标题也都是可以配置的。
不安装任何东西能先试用吗？可以——README 里有在线演示的链接，其中包括 CodeSandbox 上的可编辑版本，你可以先在浏览器里直接体验。
What are similar projects?uPlot, d3, apexcharts.js, Chart.js, plotly.js, visx, highcharts, G6
Which topics is it in?chart, zero-dependency, graph, charts, svg, visualization, data-visualization, javascript-library, developers, hacktoberfest, web-development, npm
Creator
frappe
Size
6.9 MB
Stars
15.1K
Updated
CommitDec 12Releasev1.6.3Apr 27
Age
8y
Commits · 90 Days