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 и не имеет никаких зависимостей.
Это облачный сервис или библиотека, которую я встраиваю в свою страницу?Это библиотека: вы импортируете её в проект или добавляете тег script в HTML, и диаграммы отрисовываются в формате SVG прямо в браузере.
Как добавить её в проект?Импортируйте установленный пакет или подключите тег script прямо в HTML. Если хотите работать над самой библиотекой, склонируйте репозиторий, выполните npm install, а затем npm run dev.
Она подтягивает какие-то другие библиотеки?Нет — главная особенность проекта в том, что зависимостей нет вообще, так что ничего дополнительно устанавливать не нужно.
Какие типы диаграмм она умеет рисовать?Осевые диаграммы — столбчатые, линейные и с областями, а также смешанные осевые, круговые, процентные и тепловые карты (heatmap). Диаграммы можно снабжать маркерами по осям 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