如何使用 Chart.js

使用 Chart.js 绘制图表

Chart.js 是一个用于在 JavaScript 中绘制图表的库。
我之前用过一点，但我想我会重新回顾一下如何使用它，所以我在学习的时候做了一个笔记。
我希望它对那些正在考虑使用它的人有所帮助。

https://www.chartjs.org/

版本

Chart.js 3.9.1

用法

安装

使用 npm 安装或使用 CDN。
这次是 CDN。

<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
</head>

# npmを使用する場合はこのコマンドを実行する
npm install chart.js

准备绘图区

可以使用canvas 标签指定图形绘制区域。

<canvas id="chart"></canvas>

获取画布元素的上下文并设置绘图信息。

let ctx = document.getElementById('chart');

绘图所需的元素

Chart.js 通过指定 3 个元素 type、data、options 来绘制图形。

类型

type 指定图表类型。
type 中指定的值决定了图形的绘制方式。

类型值	图表类型
线条	线形图
酒吧	条状图
雷达	雷达图
馅饼	饼形图
甜甜圈	甜甜圈图
极地	Cockscomb（不同半径对应不同值的饼图）
气泡	气泡图
分散	散点图

数据

data设置要在图形上显示的标签和数值等数据。
数据可以具有各种属性。
下面是一个属性的例子。

标签
设置图形 x 轴的标签。
数据集
设置图形颜色和数据本身的值（数组）。
绘制多个图形时，相应地设置数组中的对象。
标签
设置图形的标签（指示图形是什么）。
背景颜色
为折线图设置点的颜色，为条形图设置条的颜色。
边框颜色
对于折线图，设置线条的颜色，对于条形图，设置条形边框的颜色。

选项

使用options，您可以更改与图形相关的可选设置，例如动画设置和X轴/Y轴设置。（以下是一个例子）

动画
绘制图形时设置动画。
- 期间
  动画花费的秒数（毫秒）
- 缓和
  动画类型
秤
为轴设置值。
- 刻度标签
  设置轴标签。
- 滴答声
  设置比例。

试着画

这一次，我将尝试画一个你会经常看到的折线图（line）和一个条形图（bar），以及一个我以前从未画过的鸡冠图（polarArea）。

线形图

<body>
    <canvas id="lineChart"></canvas>
    <script>
        let lineCtx = document.getElementById("lineChart");
        // 線グラフの設定
        let lineConfig = {
          type: 'line',
          data: {
            // ※labelとデータの関係は得にありません
            labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            datasets: [{
              label: 'Red',
              data: [20, 35, 40, 30, 45, 35, 40],
              borderColor: '#f88',
            }, {
              label: 'Green',
              data: [20, 15, 30, 25, 30, 40, 35],
              borderColor: '#484',
            }, {
              label: 'Blue',
              data: [30, 25, 10, 5, 25, 30, 20],
              borderColor: '#48f',
            }],
          },
          options: {
            scales: {
              // Y軸の最大値・最小値、目盛りの範囲などを設定する
              y: {
                suggestedMin: 0,
                suggestedMax: 60,
                ticks: {
                  stepSize: 20,
                }
              }
            },
          },
        };
        let lineChart = new Chart(lineCtx, lineConfig);
    </script>
</body>

（在浏览器中查看）
Chart.jsの使い方のきほん

条状图

<body>
    <canvas id="barChart"></canvas>
    <script>
        // 棒グラフの設定
        let barCtx = document.getElementById("barChart");
        let barConfig = {
          type: 'bar',
          data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
              data: [10, 19, 6, 8, 2, 11],
              label: 'label',
              backgroundColor: [  // それぞれの棒の色を設定(dataの数だけ)
                '#ff0000',
                '#0000ff',
                '#ffff00',
                '#008000',
                '#800080',
                '#ffa500',
              ],
              borderWidth: 1,
            }]
          },
        };
        let barChart = new Chart(barCtx, barConfig);
    </script>
</body>

（在浏览器中查看）
Chart.jsの使い方のきほん

鸡冠

<body>
    <canvas id="polarChart"></canvas>
    <script>
        // 鶏頭図の設定
        let polarCtx = document.getElementById("polarChart");
        let polarConfig = {
          type: 'polarArea',
          data: {
            labels: ['April','May','June','July','August'],
            datasets: [{
              label: '月別結果',
              data: [7, 10, 9, 4, 5],
              backgroundColor: [
                '#ff0000',
                '#0000ff',
                '#ffff00',
                '#008000',
                '#ffa500',
              ]
            }]
          },
        };
        let polarChart = new Chart(polarCtx, polarConfig);
    </script>
</body>

（在浏览器中查看）
Chart.jsの使い方のきほん

结尾

我在使用 Chart.js 时第一次听到“鸡冠图”这个词。
https://dictionary.goo.ne.jp/word/%E9%B6%8F%E9%A0%AD%E5%9B%B3/

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308631967.html