Github每日精选（第37期）：零依赖的简单、响应式、现代 SVG 图表frappe-charts

本文链接：https://blog.csdn.net/weixin_40425640/article/details/126259372

charts

charts 是一个零依赖的简单、响应式、现代 SVG 图表，通过简单的几句话就能快速的生成我们需要的图表。

在这里插入图片描述

安装

npm 的安装方式：

$ npm install frappe-charts

包含在你的工程：

import { Chart } from "frappe-charts/dist/frappe-charts.min.esm"

包含在你的html中：

	<script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.2.4/dist/frappe-charts.min.iife.js"></script>
  <!-- or -->
  <script src="https://unpkg.com/frappe-charts@1.2.4/dist/frappe-charts.min.iife.js"></script>

使用如下：

在html中包含：

<div id="chart"></div>

在<script> 中包含：

const data = {
    labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
        "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
    ],
    datasets: [
        {
            name: "Some Data", type: "bar",
            values: [25, 40, 30, 35, 8, 52, 17, -4]
        },
        {
            name: "Another Set", type: "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']
})

在这里插入图片描述

面积图

面积图源自折线图，通过标记 X 轴和折线图之间的区域。它通常用于比较两个或多个不同图的曲线下面积。

lineOptions: {
    regionFill: 1 // default: 0
},

在这里插入图片描述

绘制趋势

折线图非常适合显示趋势。它们有趣的原因之一是因为所涉及的数据通常涉及大量数据点。对于这么多点，我们真的希望尽可能地保持情节的细节，同时也利用已经存在的颜色来发挥优势。让我们看看如何更改默认折线图的某些属性以减少混乱。

连续性

X 轴（通常是时间轴）通常是连续的。这意味着我们可以通过只允许几个周期性标签来减少渲染每个 X 标签的冗余。

xIsSeries我们可以通过将属性设置为axisOptions来跳过 X 标签true。

axisOptions: {
    xIsSeries: true // default: false
},

这导致只有一些 X 刻度具有标签。

在这里插入图片描述
上图中的线图仍然可以简化。例如，为了保持一致性，我们可以选择完全不显示点，使用hideDots.

lineOptions: {
    hideDots: 1 // default: 0
},

在这里插入图片描述

或者您可以选择只显示点。

lineOptions: {
    hideLine: 1 // default: 0
},

在这里插入图片描述
不用说，将它们都打开会太有趣而没有任何用处:)

显示值渐变的一种微妙方法是随着值的大小呈现颜色变化。执行此操作的属性称为heatline。

lineOptions: {
    heatline: 1 // default: 0
},

在这里插入图片描述

当显示两个数据点之间的线性斜率不合适的某些数据时，您可以使用该spline属性。

lineOptions: {
    spline: 1 // default: 0
},

在这里插入图片描述