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

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 usagetitle: "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
},