enlighten-chart.js 是一个基于 canvas 技术开发的可视化图表库，它提供了丰富的图表类型和自定义功能。本文将介绍 enlighten-chart.js 的使用教程，包括安装、基本用法以及常用图表的绘制。
安装
enlighten-chart.js 是一个基于 npm 的包，因此可以通过 npm 安装到项目中：
npm install enlighten-chart.js
基本用法
在使用 enlighten-chart.js 前，需要先在 HTML 文档中引入相关的 js 文件：
<script src="path/to/enlighten-chart.js"></script>
然后，在 js 中创建一个新的 Chart 对象：
const canvas = document.getElementById('myCanvas');
const chart = new Chart(canvas);最后，调用相应的方法即可完成基本的绘制，例如绘制一个饼图：
chart.drawPieChart([
{ value: 30, color: 'red' },
{ value: 50, color: 'blue' },
{ value: 20, color: 'green' },
]);图表绘制
饼图
饼图是一种常见的图表类型，可以通过 drawPieChart 方法绘制。该方法接收一个参数，表示饼图的数据，数据是一个由若干个对象组成的数组，每个对象包含两个属性：value 表示该部分数据的数值，color 表示该部分数据的颜色。例如：
chart.drawPieChart([
{ value: 30, color: 'red' },
{ value: 50, color: 'blue' },
{ value: 20, color: 'green' },
]);柱状图
柱状图是另一种常见的图表类型，可以通过 drawBarChart 方法绘制。该方法接收一个参数，表示柱状图的数据，数据是一个由若干个对象组成的数组，每个对象包含两个属性：value 表示该柱的高度，label 表示该柱的标签。例如：
chart.drawBarChart([
{ value: 30, label: 'A' },
{ value: 50, label: 'B' },
{ value: 20, label: 'C' },
]);折线图
折线图是一种用于显示数据随时间（或其他因素）发生变化的图表类型，可以通过 drawLineChart 方法绘制。该方法接收一个参数，表示折线图的数据，数据是一个由若干个对象组成的数组，每个对象包含两个属性：x 表示该点的 x 轴坐标，y 表示该点的 y 轴坐标。例如：
chart.drawLineChart([
{ x: 0, y: 10 },
{ x: 50, y: 20 },
{ x: 100, y: 30 },
]);自定义样式
除了基本的绘制外，enlighten-chart.js 还提供了丰富的自定义功能，如设置图表的标题、轴的标签、颜色等。通过链式调用，可以轻松实现样式的自定义，例如：
chart.setTitle('My Chart')
.setXLabel('X Label')
.setYLabel('Y Label')
.setColors(['red', 'blue', 'green'])
.setFontSize(16);总结
enlighten-chart.js 是一个强大的可视化图表库，它提供了丰富的图表类型和自定义功能，使得前端开发者可以轻松地创建高质量的图表。本文介绍了 enlighten-chart.js 的基本用法和常见的图表绘制方式，以及如何进行自定义样式。希望本文能够对前端开发者学习和使用 enlighten-chart.js 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005642a81e8991b448e1571