Chart.js - 漂亮的Javascript图表开源库

是一个使用简单、动效现代酷炫js图表库，用来构建专业美观的数据图表。

介绍

Chart.js 是一个基于 canvas 的可视化开源库。它可以用于构建简单漂亮的 H5 图表，满足产品数据可视化的需求。

官网截图

特点

包含6种不同的常用图表，每种方式都有酷炫的动画，以及一大堆的定制选项和交互性扩展；
兼容性好。基于HTML5 canvas ，兼容所有现代浏览器，并且支持 IE7/8；
无依赖的超级轻量级产品，gzip后大小仅11.01kb。
智能响应式，如果浏览器改变了大小，Chart.js 会重新调整图表的大小，同时为这个大小提供了完美的缩放粒度；
支持模块化加载，并且每个图表类型都已经分离，可以按需加载项目所需的图表类型；
针对鼠标和触摸设备上提供了对画布工具提示的简单支持，也支持自定义触发事件，能满足复杂的交互需求。

官方文档(英文)

使用体验

图表需求在互联网产品中极其常见，一般的图表库能把人给丑哭，开发一个好看的图表功能，需要投入的精力非常多。Chart.js 就是一款优秀漂亮的图表解决方案，不仅可以用在pc端中后台项目上，由于其出色的响应式设计，使得用在移动端上表现尤为亮眼，而且使用简单、API简洁，开箱即用的特点，直到现在都是我选择图表库的首选。

虽然 Chart.js 基于HTML5，不仅能用在web、小程序上，也能用混合开发的方式用在App产品中。

遗憾的是，虽然目前 Chart.js 足够好看，但并不支持样式定制，样式也不偏中性，所以对视觉设计要求高的产品需求，如果风格不相近的话，使用起来会有些突兀。

免费使用说明

Chart.js 是开放源代码，基于MIT许可开源，我们可以免费使用在任何项目。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的相关网址。

文作者：HelloGitHub-kalifun

图表库千万个今天 HelloGitHub 给大家推荐个很有“特色”的图表库：一个手绘风格的 JS 图表库 —— Chart.xkcd，快收起你紧绷、严肃的面容让我们一起看看用手绘风格展示数据的效果。

一、介绍

项目地址：https://github.com/timqian/chart.xkcd

Chart.xkcd 是一个图表库，可绘制“非精细”、“卡通”或“手绘”样式的图表。

效果是不是很可爱？那下面就跟着 HelloGitHub 发起的《讲解开源项目》^[1]的教程一起学习、上手使用起来吧！

二、快速入手

使用 Chart.xkcd 很容易，只需页面中包含库的引用和一个用于显示图表的 <svg> 节点即可。

2.1 代码示例

先用一段简短的代码，让大家了解下基本的参数和代码的样子，后面会有可运行的代码示例片段供大家学习和使用。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<!--将 SVG 元素直接嵌入 HTML 页面中-->
<svg class="line-chart"></svg>
<!--引入 JS 库-->
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
 //关键代码块
 const svg = document.querySelector('.line-chart')
 new chartXkcd.Line(svg, {
 title: '',
 xLabel: '',
 yLabel: '',
 data: {...},
 options: {},
 });
</script>
</body>
</html>

2.2 参数说明

title：图表的标题
xLabel：图表的 x 标签
yLabel：图表的 y 标签
data：需要可视化的数据
options：自定义设置

三、图表类型

Chart.xkcd 支持多样的图表类型，下面将逐一讲解和实现：折线图、XY 图、条形图、圆饼/甜甜圈图、雷达图，实现的示例代码完整可运行、注释完整、包含参数说明。

tips：下文中的示例代码均可直接运行，保存为 html 文件便可在本机查看效果。

3.1 折线图

折线图以折线形式显示一系列数据点，它可以用于显示趋势数据或不同数据集的比较。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<!--将 SVG 元素直接嵌入 HTML 页面中-->
<svg class="line-chart"></svg>
<!--引入 JS 库-->
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
 // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。获取文档中 class=".line-chart" 的元素。
 const svg = document.querySelector('.line-chart');
 // chartXkcd.Line 创建一个折线图
 const lineChart = new chartXkcd.Line(svg, {
 //图表的标题
 title: 'Monthly income of an indie developer',
 // 图表的 x 标签
 xLabel: 'Month',
 // 图表的 y 标签
 yLabel: '$ Dollors',
 // 需要可视化的数据
 data: {
 // x 轴数据
 labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
 // y 轴数据
 datasets: [{
 // 第一组数据
 label: 'Plan',
 data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
 }, {
 // 第二组数据
 label: 'Reality',
 data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
 }],
 },
 // 可选配置以自定义图表的外观
 options: {
 // 自定义要在 y 轴上看到的刻度号（默认为 3）
 yTickCount: 3,
 // 指定要放置图例的位置
 legendPosition: chartXkcd.config.positionType.upLeft
 }
 });
</script>
</body>
</html>

参数说明

yTickCount：自定义要在y轴上看到的刻度号（默认为 3）
legendPosition：指定要放置图例的位置（默认为 chartXkcd.config.positionType.upLeft）。
左上位置：chartXkcd.config.positionType.upLeft
顶右上位置：chartXkcd.config.positionType.upRight
左下位置：chartXkcd.config.positionType.downLeft
右下位置：chartXkcd.config.positionType.downRight
dataColors：不同颜色的数据集数组
fontFamily：定制图表中使用的字体系列
unxkcdify：禁用 xkcd 效果（默认为 false）

效果展示

3.2 XY 图

XY 图表用于通过指定点的 XY 坐标来绘制点，您也可以通过连接这些点来绘制 XY 折线图。

示例代码

<script>
 // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。获取文档中 class=".xy-chart" 的元素。
 const svg = document.querySelector('.xy-chart');
 //chartXkcd.XY 创建一个XY图
 new chartXkcd.XY(svg, {
 //图表的标题
 title: 'Pokemon farms',
 // 图表的 x 标签
 xLabel: 'Coodinate',
 // 图表的 y 标签
 yLabel: 'Count',
 // 需要可视化的数据
 data: {
 datasets: [{
 // 第一组数据
 label: 'Pikachu',
 data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }],
 }, {
 // 第二组数据
 label: 'Squirtle',
 data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }],
 }],
 },
 options: {
 // 自定义要在 x 轴上看到的刻度号（默认为 3）
 xTickCount: 5,
 // 自定义要在 y 轴上看到的刻度号（默认为 3）
 yTickCount: 5,
 // 指定要放置图例的位置
 legendPosition: chartXkcd.config.positionType.upRight,
 // 用线连接点（默认 false）
 showLine: false,
 // 指定时间格式
 timeFormat: undefined,
 // 更改点的大小（默认为 1）
 dotSize: 1,
 },
 });
</script>

参数说明

xTickCount：自定义要在x轴上看到的刻度号（默认为 3）
yTickCount：自定义要在y轴上看到的刻度号（默认为 3）
legendPosition：指定要放置图例的位置
showLine: 点连接成线。
timeFormat：指定时间格式
dotSize：更改点的大小（默认为 1）
dataColors：不同颜色的数据集数组
fontFamily：定制图表中使用的字体系列
unxkcdify：禁用 xkcd 效果（默认为 false）

效果展示

如果你想将这些点连接起来，让数据对比更加明显的话。请修改 showLine：true 再刷新页面你就可以看到连线的效果了。

3.3 条形图

条形图提供了一种显示以竖条表示的数据值的方式。

示例代码

<script>
 // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。获取文档中 class=".bar-chart" 的元素。
 const svg = document.querySelector('.bar-chart');
 // chartXkcd.Bar 创建一个条形图
 const barChart = new chartXkcd.Bar(svg, {
 // 图表的标题
 title: 'github stars VS patron number',
 // xLabel: '', // optional
 // yLabel: '', // optional
 // 图表数据
 data: {
 labels: ['github stars', 'patrons'],
 datasets: [{
 data: [100, 2],
 }],
 },
 options: {
 // 自定义要在 y 轴上看到的刻度号（默认为 3）
 yTickCount: 2,
 },
 });
</script>

参数说明

yTickCount：自定义要在y轴上看到的刻度号（默认为 3）
dataColors：不同颜色的数据集数组
fontFamily：定制图表中使用的字体系列
unxkcdify：禁用xkcd效果（默认为 false）

效果展示

3.4 圆饼/甜甜圈图

饼图广泛得应用在各个领域，用于表示不同分类的占比情况，通过弧度大小来对比各种分类。饼图通过将一个圆饼按照分类的占比划分成多个区块，整个圆饼代表数据的总量，每个区块（圆弧）表示该分类占总体的比例大小，所有区块（圆弧）的加和等于 100%。

示例代码

<script>
 // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。获取文档中 class=".pie-chart" 的元素。
 const svg = document.querySelector('.pie-chart');
 // chartXkcd.Pie 创建一个圆饼图
 const pieChart = new chartXkcd.Pie(svg, {
 // 图表的标题
 title: 'What Tim made of',
 // 需要可视化的数据
 data: {
 labels: ['a', 'b', 'e', 'f', 'g'],
 datasets: [{
 data: [500, 200, 80, 90, 100],
 }],
 },
 options: {
 // 指定空的饼图半径
 innerRadius: 0.5,
 // 指定要放置图例的位置
 legendPosition: chartXkcd.config.positionType.upRight,
 },
 });
</script>

参数说明

innerRadius：指定空的饼图半径（默认值：0.5）
需要饼图吗？将 innerRadius 设置为 0
legendPosition：指定要放置图例的位置
dataColors：不同颜色的数据集数组
fontFamily：定制图表中使用的字体系列
unxkcdify：禁用 xkcd 效果（默认为 false）

效果展示

3.5 雷达图

雷达图（Radar Chart）又被叫做蜘蛛网图，适用于显示三个或更多的维度的变量。雷达图是以在同一点开始的轴上显示的三个或更多个变量的二维图表的形式来显示多元数据的方法，其中轴的相对位置和角度通常是无意义的。

示例代码

<script>
 // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。获取文档中 class=".radar-chart" 的元素。
 const svg = document.querySelector('.radar-chart');
 // chartXkcd.Radar 创建一个雷达图
 const radarChart = new chartXkcd.Radar(svg, {
 // 图表的标题
 title: 'Letters in random words',
 // 需要可视化的数据
 data: {
 labels: ['c', 'h', 'a', 'r', 't'],
 datasets: [{
 label: 'ccharrrt',
 data: [2, 1, 1, 3, 1],
 }, {
 label: 'chhaart',
 data: [1, 2, 2, 1, 1],
 }],
 },
 options: {
 // 在图表中显示图例
 showLegend: true,
 // 点的大小
 dotSize: 0.8,
 // 在每行附近显示标签
 showLabels: true,
 // 指定要放置图例的位置
 legendPosition: chartXkcd.config.positionType.upRight,
 // unxkcdify: true,
 },
 });
</script>

参数说明

showLabels：在每行附近显示标签（默认为 false）
ticksCount：自定义要在主行上看到的刻度号（默认为 3）
dotSize：更改点的大小（默认为 1）
showLegend：在图表附近显示图例（默认为 false）
legendPosition：指定要放置图例的位置
dataColors：不同颜色的数据集数组
fontFamily：定制图表中使用的字体系列
unxkcdify：禁用 xkcd 效果（默认为 false）

效果展示

四、最后

以上就是讲解的全部内容，相信教程至此 Chart.xkcd 库的基本用法你已经基本掌握，后面就可以用来今天学到的东西，提高自己项目的颜值了。

有了 Chart.xkcd 让数据可爱地展示出来并不难，快动手自己实现一个吧～

参考资料

[1]《讲解开源项目》: https://github.com/HelloGitHub-Team/Article

[2]CHART.XKCD 官方文档: https://timqian.com/chart.xkcd/

[3]CHART.XKCD 项目地址: https://github.com/timqian/chart.xkcd

『讲解开源项目系列』——让对开源项目感兴趣的人不再畏惧、让开源项目的发起者不再孤单。跟着我们的文章，你会发现编程的乐趣、使用和发现参与开源项目如此简单。欢迎留言联系我们、加入我们，让更多人爱上开源、贡献开源～

程序开发的朋友希望对你们有所帮助！！

1.JavaScript 图表库ECharts [国产]（是一款由百度前端技术部开发的，基于Javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。）

2.ECharts - Java类库ECharts-Java[国产] （一个针对 ECharts 2.0 版本的Java类库，实现了所有ECharts中的Json结构对应的Java对象，）

3.仪表盘 WebApp 模板AdminLTE（AdminLTE 是受欢迎的开源的管理仪表盘和控制面板的WebApp模板。它是基于Bootstrap 3的CSS框架，反应灵敏的HTML模板。）

4.Web 报表工具 EasyReport [国产] （一个简单易用的 Web 报表工具。它的主要功能是把 SQL 语句查询出的行列结构转换成 HTML 表格(Table)，并支持表格的跨行(RowSpan)与跨列(ColSpan)。同时它还支持报表 Excel 导出、图表显示及固定表头与左边列的功能。）

5.基于 canvas 的小型图表库sChart.js [国产] （使用canvas实现的一个小型简单的图表库，经过服务器gzip压缩只有2kb，包含柱状图、折线图、饼状图和环形图。不依赖任何js库，使用方便）

6.React 和 D3 构建的图表库Recharts[国产] (一个用 React 和 D3构建的重新定义的图表库,简单地使用 React 组件进行部署,支持原生 SVG，轻量级应用一些 D3 子模块)

7.纯 Javascript 图表 Highcharts (一个制作图表的纯Javascript类库，主要特性如下：兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；对个人用户完全免费；纯JS，无BS)

切版 qieban(.cn)

在线咨询

上一篇：java将html转为pdf
下一篇：用纯javascript实现斗鱼直播弹幕效果，代码也才这么点

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Chart.js - 漂亮的Javascript图表开源库

介绍

特点

使用体验

免费使用说明

您的项目需求