Chart.js：适用于现代 Web 的简单而灵活的 JavaScript 图表库

挑战30天在头条写日记#

功能：

颜色插件

Chart.js 品牌颜色的默认调色板可作为内置的省时零配置插件使用。

Tree-shaking

通过仅注册必要的组件，JavaScript 包的大小可以减少数十千字节。

规模堆叠

布局框可以按组堆叠和加权。

字幕插件

辅助标题插件，具有与主标题相同的所有选项。

线段样式

线段可以根据任何用户定义的标准设置样式。

3.0新功能高级动画

每个元素中每个属性的转换都可以单独且独立地配置。

新功能表现！

引入了许多性能增强功能。此示例具有 1M (2x500k) 点，启用了新的抽取插件。

2.0新功能混合图表类型

混合搭配条形图和折线图，以在数据集之间提供清晰的视觉区分。

2.0新功能新的图表轴类型

轻松绘制日期时间、对数甚至完全自定义比例的复杂、稀疏数据集。

2.0新功能动画一切！

更改数据、更新颜色和添加数据集时，开箱即用的令人惊叹的过渡。

使用Demo-创建图表

在此示例中，我们为单个数据集创建条形图并将其呈现在 HTML 页面上。将此代码片段添加到您的页面：

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

你应该得到一个像这样的图表：

让我们分解一下这段代码。

首先，我们的页面中需要有一个画布。建议为图表提供自己的容器以提高响应能力。

<div>
  <canvas id="myChart"></canvas>
</div>

现在我们有了画布，我们可以包含来自 CDN 的 Chart.js。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

最后，我们可以创建一个图表。我们添加一个脚本，该脚本获取myChart画布元素并new Chart使用所需的配置进行实例化：bar图表类型、标签、数据点和选项。

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

Chart.js 的所有主要概念：

图表类型和元素、数据集、自定义、插件、组件和 tree-shaking。不要犹豫，点击文本中的链接。

我们将从头开始使用几个图表构建 Chart.js 数据可视化：

使用 Chart.js 构建新应用程序

在新文件夹中，创建package.json包含以下内容的文件：

{
  "name": "chartjs-example",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "devDependencies": {
    "parcel": "^2.6.2"
  },
  "dependencies": {
    "@cubejs-client/core": "^0.31.0",
    "chart.js": "^4.0.0"
  }
}

现代前端应用程序经常使用 JavaScript 模块捆绑器，因此我们选择Parcel 作为一个很好的零配置构建工具。我们还安装了 Chart.js v4 和Cube 的 JavaScript 客户端，这是一个用于数据应用程序的开源 API，我们将使用它来获取真实世界的数据（稍后会详细介绍）。

运行npm install、yarn install、或pnpm install安装依赖项，然后创建src文件夹。在该文件夹中，我们需要一个非常简单的index.html文件：

<!doctype html>
<html lang="en">
  <head>
    <title>Chart.js example</title>
  </head>
  <body>
    <!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
    <div style="width: 800px;"><canvas id="acquisitions"></canvas></div>

    <!-- <script type="module" src="dimensions.js"></script> -->
    <script type="module" src="acquisitions.js"></script>
  </body>
</html>

正如您所看到的，Chart.js 需要最少的标记：canvas带有的标记id，我们稍后将通过它引用图表。默认情况下，Chart.js 图表是响应式的，并占据整个封闭容器。所以，我们设置宽度div来控制图表的宽度。

最后，让我们创建src/acquisitions.js包含以下内容的文件：

import Chart from 'chart.js/auto'

(async function() {
  const data = [
    { year: 2010, count: 10 },
    { year: 2011, count: 20 },
    { year: 2012, count: 15 },
    { year: 2013, count: 25 },
    { year: 2014, count: 22 },
    { year: 2015, count: 30 },
    { year: 2016, count: 28 },
  ];

  new Chart(
    document.getElementById('acquisitions'),
    {
      type: 'bar',
      data: {
        labels: data.map(row => row.year),
        datasets: [
          {
            label: 'Acquisitions by year',
            data: data.map(row => row.count)
          }
        ]
      }
    }
  );
})();

让我们看一下这段代码：

我们Chart从特殊路径导入 Chart.js 主类chart.js/auto。它加载所有可用的 Chart.js 组件（这非常方便），但不允许进行树摇动。我们稍后会解决这个问题。
我们实例化一个新Chart实例并提供两个参数：将呈现图表的画布元素和选项对象。
我们只需要提供一个图表类型 ( bar) 并提供data它由labels（通常是数据点的数字或文本描述）和一个数组datasets（Chart.js 支持大多数图表类型的多个数据集）组成。每个数据集都用 a 指定，label并包含一个数据点数组。
目前，我们只有一些虚拟数据条目。因此，我们提取year和count属性来生成labels唯一数据集中的和数据点数组。

是时候使用npm run dev、yarn dev、或运行示例并在 Web 浏览器中pnpm dev导航到localhost:1234 了：

只需几行代码，我们就得到了一个具有很多功能的图表：图例、网格线、刻度线和悬停时显示的工具提示。刷新网页几次即可看到图表也是动画的。尝试单击“按年份获取”标签，您会发现您还可以切换数据集可见性（当您有多个数据集时特别有用）。

简单的定制

让我们看看如何自定义 Chart.js 图表。首先，让我们关闭动画，以便立即显示图表。其次，让我们隐藏图例和工具提示，因为我们只有一个数据集和相当琐碎的数据。

将调用new Chart(...);替换src/acquisitions.js为以下代码片段：

  new Chart(
    document.getElementById('acquisitions'),
    {
      type: 'bar',
      options: {
        animation: false,
        plugins: {
          legend: {
            display: false
          },
          tooltip: {
            enabled: false
          }
        }
      },
      data: {
        labels: data.map(row => row.year),
        datasets: [
          {
            label: 'Acquisitions by year',
            data: data.map(row => row.count)
          }
        ]
      }
    }
  );

正如您所看到的，我们已将该options属性添加到第二个参数中，这样您就可以为 Chart.js 指定各种自定义选项。通过提供的布尔标志禁用动画animation。大多数图表范围的选项（例如，响应能力或设备像素比）都是这样配置的。

图例和工具提示隐藏在plugins. 请注意，Chart.js 的一些功能被提取到插件中：独立的、独立的代码片段。其中一些插件作为Chart.js 发行版的一部分提供，其他插件是独立维护的，并且可以位于很棒的插件、框架集成和其他图表类型列表中。

您应该能够在浏览器中看到更新后的简约图表。

真实世界数据

对于硬编码、有限大小、不切实际的数据，很难展示 Chart.js 的全部潜力。让我们快速连接到数据 API，以使我们的示例应用程序更接近生产用例。

让我们创建src/api.js包含以下内容的文件：

import { CubejsApi } from '@cubejs-client/core';

const apiUrl = 'https://heavy-lansford.gcp-us-central1.cubecloudapp.dev/cubejs-api/v1';
const cubeToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjEwMDAwMDAwMDAsImV4cCI6NTAwMDAwMDAwMH0.OHZOpOBVKr-sCwn8sbZ5UFsqI3uCs6e4omT7P6WVMFw';

const cubeApi = new CubejsApi(cubeToken, { apiUrl });

export async function getAquisitionsByYear() {
  const acquisitionsByYearQuery = {
    dimensions: [
      'Artworks.yearAcquired',
    ],
    measures: [
      'Artworks.count'
    ],
    filters: [ {
      member: 'Artworks.yearAcquired',
      operator: 'set'
    } ],
    order: {
      'Artworks.yearAcquired': 'asc'
    }
  };

  const resultSet = await cubeApi.load(acquisitionsByYearQuery);

  return resultSet.tablePivot().map(row => ({
    year: parseInt(row['Artworks.yearAcquired']),
    count: parseInt(row['Artworks.count'])
  }));
}

export async function getDimensions() {
  const dimensionsQuery = {
    dimensions: [
      'Artworks.widthCm',
      'Artworks.heightCm'
    ],
    measures: [
      'Artworks.count'
    ],
    filters: [
      {
        member: 'Artworks.classification',
        operator: 'equals',
        values: [ 'Painting' ]
      },
      {
        member: 'Artworks.widthCm',
        operator: 'set'
      },
      {
        member: 'Artworks.widthCm',
        operator: 'lt',
        values: [ '500' ]
      },
      {
        member: 'Artworks.heightCm',
        operator: 'set'
      },
      {
        member: 'Artworks.heightCm',
        operator: 'lt',
        values: [ '500' ]
      }
    ]
  };

  const resultSet = await cubeApi.load(dimensionsQuery);

  return resultSet.tablePivot().map(row => ({
    width: parseInt(row['Artworks.widthCm']),
    height: parseInt(row['Artworks.heightCm']),
    count: parseInt(row['Artworks.count'])
  }));
}

让我们看看那里发生了什么：

我们为Cubeimport （数据应用程序的开源 API）提供 JavaScript 客户端库，使用 API URL ( ) 和身份验证令牌 ( ) 配置它，最后实例化客户端 ( )。 apiUrlcubeTokencubeApi
Cube API 托管在Cube Cloud 中，并连接到一个数据库，该数据库包含约 140,000 条记录的公共数据集，代表美国纽约现代艺术博物馆收藏的所有艺术品。当然，这是一个比我们现在拥有的更真实的数据集。
我们定义了几个异步函数来从 API 获取数据：getAquisitionsByYear和getDimensions。第一个返回按购买年份计算的艺术品数量，另一个返回每个宽度-高度对的艺术品数量（我们将在另一个图表中需要它）。
我们来看一下getAquisitionsByYear。首先，我们在变量中创建一个基于 JSON 的声明性查询acquisitionsByYearQuery。正如您所看到的，我们指定了每件yearAcquired我们想要获得count的艺术品；yearAcquired必须设置（即不是未定义）；结果集将按yearAcquired升序排序。
其次，我们resultSet通过调用获取并将其映射到具有所需属性cubeApi.load的对象数组。yearcount

现在，让我们将真实世界的数据传递到我们的图表中。请进行一些更改src/acquisitions.js：添加导入并替换data变量的定义。

import { getAquisitionsByYear } from './api'

// ...

const data = await getAquisitionsByYear();

完毕！现在，我们的真实数据图表如下所示。看来1964年、1968年和2008年发生了一些有趣的事情！

我们已经完成了条形图。让我们尝试另一种 Chart.js 图表类型。

进一步定制

Chart.js 支持许多常见的图表类型。

例如，气泡图允许同时显示三个维度的数据：x和y轴上的位置代表两个维度，第三个维度由单个气泡的大小表示。

要创建图表，请停止已运行的应用程序，然后转到src/index.html并取消注释以下两行：

<div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/>

<script type="module" src="dimensions.js"></script>

然后，创建src/dimensions.js包含以下内容的文件：

import Chart from 'chart.js/auto'
import { getDimensions } from './api'

(async function() {
  const data = await getDimensions();

  new Chart(
    document.getElementById('dimensions'),
    {
      type: 'bubble',
      data: {
        labels: data.map(x => x.year),
        datasets: [
          {
            label: 'Dimensions',
            data: data.map(row => ({
              x: row.width,
              y: row.height,
              r: row.count
            }))
          }
        ]
      }
    }
  );
})();

也许，一切都非常简单：我们从 API 获取数据并渲染一个具有该类型的新图表，将三个维度的数据作为、和（半径）属性bubble传递。xyr

现在，使用、或重置缓存并再次启动rm -rf .parcel-cache应用程序。我们现在可以查看新图表：npm run devyarn devpnpm dev

嗯，看起来不太漂亮。

首先，图表不是正方形的。艺术品的宽度和高度同样重要，因此我们希望图表的宽度也等于其高度。默认情况下，Chart.js 图表的纵横比为 1（对于所有径向图表，例如圆环图）或 2（对于所有其他图表）。让我们修改图表的纵横比：

// ...

	new Chart(
    document.getElementById('dimensions'),
    {
      type: 'bubble',
      options: {
        aspectRatio: 1,
      },

// ...

现在看起来好多了：

然而，这仍然不理想。水平轴的范围从 0 到 500，垂直轴的范围从 0 到 450。默认情况下，Chart.js 会自动将轴的范围（最小值和最大值）调整为数据集中提供的值，因此图表“适合“你的数据。显然，MoMa 收藏中没有高度在 450 至 500 厘米范围内的艺术品。让我们修改图表的轴配置来解决这个问题：

// ...

  new Chart(
    document.getElementById('dimensions'),
    {
      type: 'bubble',
      options: {
        aspectRatio: 1,
        scales: {
          x: {
            max: 500
          },
          y: {
            max: 500
          }
        }
      },

// ...

伟大的！看一下更新后的图表：

然而，还有一个问题：这些数字是多少？单位是厘米不是很明显。让我们对两个轴应用自定义刻度格式以使事情变得清晰。我们将提供一个回调函数，调用该函数来格式化每个刻度值。这是更新后的轴配置：

// ...

  new Chart(
    document.getElementById('dimensions'),
    {
      type: 'bubble',
      options: {
        aspectRatio: 1,
        scales: {
          x: {
            max: 500,
            ticks: {
              callback: value => `${value / 100} m`
            }
          },
          y: {
            max: 500,
            ticks: {
              callback: value => `${value / 100} m`
            }
          }
        }
      },

// ...

完美，现在我们在两个轴上都有合适的单位：

多个数据集

Chart.js 独立绘制每个数据集，并允许对它们应用自定义样式。

看一下图表：有一条可见的气泡“线”，其等号x和y坐标代表方形艺术品。将这些气泡放入自己的数据集中并以不同的方式绘制它们会很酷。此外，我们可以将“较高”的艺术品与“较宽”的艺术品分开，并以不同的方式绘制它们。

我们可以这样做。将其替换datasets为以下代码：

// ...

        datasets: [
          {
            label: 'width = height',
            data: data
              .filter(row => row.width === row.height)
              .map(row => ({
                x: row.width,
                y: row.height,
                r: row.count
              }))
          },
          {
            label: 'width > height',
            data: data
              .filter(row => row.width > row.height)
              .map(row => ({
                x: row.width,
                y: row.height,
                r: row.count
              }))
          },
          {
            label: 'width < height',
            data: data
              .filter(row => row.width < row.height)
              .map(row => ({
                x: row.width,
                y: row.height,
                r: row.count
              }))
          }
        ]

// ..

如您所见，我们定义了三个具有不同标签的数据集。每个数据集都有自己的使用提取的数据片段filter。现在，它们在视觉上是不同的，而且正如您所知，您可以独立切换它们的可见性。

这里我们依赖默认的调色板。但是，请记住，每种图表类型都支持许多数据集选项，您可以随意自定义。

插件

另一种非常强大的自定义 Chart.js 图表的方法是使用插件。您可以在插件目录中找到一些或创建您自己的临时插件。在 Chart.js 生态系统中，这是惯用的，并且期望通过插件来微调图表。例如，您可以自定义画布背景或使用简单的临时插件为其添加边框。让我们尝试一下后者。

插件具有广泛的 API，但简而言之，插件被定义为name具有扩展点中定义的一个或多个回调函数的对象。new Chart(...);在调用之前插入以下代码片段来代替src/dimensions.js：

// ...

  const chartAreaBorder = {
    id: 'chartAreaBorder',

    beforeDraw(chart, args, options) {
      const { ctx, chartArea: { left, top, width, height } } = chart;

      ctx.save();
      ctx.strokeStyle = options.borderColor;
      ctx.lineWidth = options.borderWidth;
      ctx.setLineDash(options.borderDash || []);
      ctx.lineDashOffset = options.borderDashOffset;
      ctx.strokeRect(left, top, width, height);
      ctx.restore();
    }
  };

  new Chart(
    document.getElementById('dimensions'),
    {
      type: 'bubble',
      plugins: [ chartAreaBorder ],
      options: {
        plugins: {
          chartAreaBorder: {
            borderColor: 'red',
            borderWidth: 2,
            borderDash: [ 5, 5 ],
            borderDashOffset: 2,
          }
        },
        aspectRatio: 1,

// ...

正如您所看到的，在这个chartAreaBorder插件中，我们获取画布上下文，保存其当前状态，应用样式，在图表区域周围绘制矩形，然后恢复画布状态。我们还传递了该插件，plugins因此它仅适用于这个特定的图表。我们还将插件选项传递给options.plugins.chartAreaBorder; 我们当然可以在插件源代码中对它们进行硬编码，但这种方式可重用性更高。

我们的气泡图现在看起来更漂亮了：

摇树

在生产中，我们努力交付尽可能少的代码，以便最终用户可以更快地加载我们的数据应用程序并获得更好的体验。为此，我们需要应用tree-shaking ，这是一个奇特的术语，用于从 JavaScript 包中删除未使用的代码。

Chart.js 的组件设计完全支持 tree-shaking。您可以一次注册所有 Chart.js 组件（这在您进行原型设计时很方便）并将它们与您的应用程序捆绑在一起。或者，您可以仅注册必要的组件并获得最小的捆绑包，其大小要小得多。

让我们检查一下我们的示例应用程序。捆绑包尺寸是多少？您可以停止应用程序并运行npm run build, 或yarn build, 或pnpm build。片刻之后，您将得到如下信息：

% yarn build
yarn run v1.22.17
$ parcel build src/index.html
✨ Built in 88ms

dist/index.html              381 B   164ms
dist/index.74a47636.js   265.48 KB   1.25s
dist/index.ba0c2e17.js       881 B    63ms
✨ Done in 0.51s.

我们可以看到 Chart.js 和其他依赖项被捆绑在一个 265 KB 文件中。

src/acquisitions.js为了减小包的大小，我们需要对和进行一些更改src/dimensions.js。首先，我们需要从两个文件中删除以下导入语句：import Chart from 'chart.js/auto'.

相反，我们只加载必要的组件并使用 Chart.js“注册”它们Chart.register(...)。这是我们需要的src/acquisitions.js：

import {
  Chart,
  Colors,
  BarController,
  CategoryScale,
  LinearScale,
  BarElement,
  Legend
} from 'chart.js'

Chart.register(
  Colors,
  BarController,
  BarElement,
  CategoryScale,
  LinearScale,
  Legend
);

这是以下代码片段src/dimensions.js：

import {
  Chart,
  Colors,
  BubbleController,
  CategoryScale,
  LinearScale,
  PointElement,
  Legend
} from 'chart.js'

Chart.register(
  Colors,
  BubbleController,
  PointElement,
  CategoryScale,
  LinearScale,
  Legend
);

您可以看到，除了Chart类之外，我们还加载图表类型、比例和其他图表元素（例如，条形图或点）的控制器。您可以在文档中查找所有可用的组件。

或者，您可以按照控制台中的 Chart.js 建议进行操作。例如，如果您忘记导入BarController条形图，您将在浏览器控制台中看到以下消息：

Unhandled Promise Rejection: Error: "bar" is not a registered controller.

chart.js/auto请记住在准备生产应用程序时仔细检查进口。只需要一次这样的导入就可以有效地禁用树摇动。

现在，让我们再次检查我们的应用程序。运行yarn build你会得到这样的结果：

% yarn build
yarn run v1.22.17
$ parcel build src/index.html
✨ Built in 88ms

dist/index.html              381 B   176ms
dist/index.5888047.js    208.66 KB   1.23s
dist/index.dcb2e865.js       932 B    58ms
✨ Done in 0.51s.

过仅导入和注册选定的组件，我们删除了超过 56 KB 的不必要代码。鉴于其他依赖项在捆绑包中占用约 50 KB，tree-shaking 有助于从我们的示例应用程序的捆绑包中删除约 25% 的 Chart.js 代码。

项目地址：https://github.com/chartjs/Chart.js

过DataGear的参数化数据集、图表事件处理和看板API功能，可以很方便地制作联动异步加载图表的数据可视化看板。

首先，新建一个参数化SQL数据集，如下所示：

SELECT
  COL_NAME,   --地区名
  COL_VALUE,  --地区指标数值
FROM
  T_ANALYSIS
WHERE
<#if 上级地区名??>
  COL_PARENT='${上级地区名}'
<#else>
  COL_PARENT='中国'
</#if>

参数：

名称        类型     必填
上级地区名  字符串   否

T_ANALYSIS表数据示例：

COL_NAME     COL_VALUE   COL_PARENT
山东	     160         中国
北京         200         中国
...
朝阳区       195         北京
海淀区       200         北京
...
青岛市       10          山东
济南市       160         山东

然后，使用上述数据集，新建两个图表，第一个是展示全国指标的地图图表：

图表类型：基本地图
数据集列标记：
COL_NAME：地区名称 (name)
COL_VALUE：指标数值 (value)

第二个是展示指定地区指标的柱状图：

图表类型：基本柱状图
数据集列标记：
COL_NAME：名称 (name) 
COL_VALUE：数值 (value)

然后，新建可视化看板，填写如下看板模板内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dg-chart{
  display: inline-block;
  width: 600px;
  height: 500px;
}
#loadChartWrapper{
  position:absolute;
  top:0;
  left:650px;
  width:400px;
  height:300px;
  box-shadow: 0px 0px 6px #474747;
  -webkit-box-shadow: 0px 0px 6px #474747;
  display:none;
}
#loadChart{
  position:absolute;
  top:2em;
  left:0;
  right:0;
  bottom:0;
}
</style>
<script type="text/javascript">
function chartClickHandler(chartEvent)
{
  //获取点击的地区名
  var name = chartEvent.data.name;
  $("#chartTitle").html(name);
  
  //图表已加载，直接刷新数据
  if(dashboard.renderedChart("loadChart"))
  {
    var chart = dashboard.chartOf("loadChart");
    chart.dataSetParamValueFirst(0, name);
    chart.refreshData();
    $("#loadChartWrapper").show();
  }
  //图表未加载
  else
  {
    dashboard.loadChart($("#loadChart"), "[第二个图表ID]",function(chart)
    {
      chart.dataSetParamValueFirst(0, name);
      $("#loadChartWrapper").show();
    });
  }
}
$(function()
{
  $("#removeChartBtn").click(function()
  {
    dashboard.removeChart("loadChart");
    $("#loadChartWrapper").hide();
  });
});
</script>
</head>
<body class="dg-dashboard">
<div style="position: absolute;left:1;top:1;font-size:12px;">
	DataGear <br>
	http://www.datagear.tech
</div>
<div style="font-size:2em;text-align:center;margin-bottom:5px;">DataGear 看板示例</div>
<p> </p>
<div style="position:relative;">
  <div class="dg-chart" dg-chart-on-click="chartClickHandler"
    dg-chart-disable-setting="true"
    dg-chart-widget="[第一个图表ID]">
    <!--全国指标--></div>
  
  <div id="loadChartWrapper">
    <div id="chartTitle" style="position:absolute;top:2px;left:4px;font-weight:bold;"></div>
    <button id="removeChartBtn" style="position:absolute;top:2px;right:2px;">X</button>
    <div id="loadChart" dg-chart-disable-setting="true"
      dg-chart-options="{title:{show:false},legend:{show:false},grid:{top:30}}">
    <!--待加载的图表元素--></div>
  </div>
</div>
</body>
</html>

点击[保存并展示]按钮，打开看板展示页面，完成！！！

注意，上述模板中的“[第一个图表ID]”、“[第二个图表ID]”要替换为实际的ID。

效果图如下所示：

官网地址：http://www.datagear.tech

源码地址：

Gitee：https://gitee.com/datagear/datagear

Github：https://github.com/datageartech/datagear

大屏模板地址：https://gitee.com/datagear/DataGearDashboardTemplate

文作者：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

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

在线咨询

上一篇：JavaScript定时器
下一篇：前端实用特效：javascript制作腾讯新闻轮播小案例

您的项目需求

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

整合营销服务商

Chart.js：适用于现代 Web 的简单而灵活的 JavaScript 图表库

功能：

使用Demo-创建图表

Chart.js 的所有主要概念：

您的项目需求