Chart.js 集成

Chart.js 可以与纯 JavaScript 或不同的模块加载器集成。 下面的例子展示了如何在不同的系统中加载 Chart.js。

script 标签

<script src="path/to/chartjs/dist/chart.js"></script>
<script>
    const myChart = new Chart(ctx, {...});
</script>

Common Js

const Chart = require('chart.js');
const myChart = new Chart(ctx, {...});

捆绑器（Webpack、Rollup 等）

Chart.js 3 是可树形化的，因此有必要导入和注册我们将要使用的控制器、元素、缩放和插件。

对于所有可用的导入，请参见下面的示例。

import {
  Chart,
  ArcElement,
  LineElement,
  BarElement,
  PointElement,
  BarController,
  BubbleController,
  DoughnutController,
  LineController,
  PieController,
  PolarAreaController,
  RadarController,
  ScatterController,
  CategoryScale,
  LinearScale,
  LogarithmicScale,
  RadialLinearScale,
  TimeScale,
  TimeSeriesScale,
  Decimation,
  Filler,
  Legend,
  Title,
  Tooltip,
  SubTitle
} from 'chart.js';

Chart.register(
  ArcElement,
  LineElement,
  BarElement,
  PointElement,
  BarController,
  BubbleController,
  DoughnutController,
  LineController,
  PieController,
  PolarAreaController,
  RadarController,
  ScatterController,
  CategoryScale,
  LinearScale,
  LogarithmicScale,
  RadialLinearScale,
  TimeScale,
  TimeSeriesScale,
  Decimation,
  Filler,
  Legend,
  Title,
  Tooltip,
  SubTitle
);

const myChart = new Chart(ctx, {...});

还可以使用简短的注册格式来快速注册所有内容。

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

最后，有一中方法可以在一行代码中为我们完成上述操作：

import Chart from 'chart.js/auto';

辅助函数

如果要使用辅助函数，则需要将它们从辅助包中单独导入，并将它们用作独立函数。

使用捆绑器将事件转换为数据值的示例。

import Chart from 'chart.js/auto';
import { getRelativePosition } from 'chart.js/helpers';

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    onClick: (e) => {
      const canvasPosition = getRelativePosition(e, chart);

      // 替换适当的比例 ID
      const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
      const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
    }
  }
});

Require JS

重要提示 ：RequireJS 无法按原样加载 CommonJS 模块，因此请务必使用其中一个 UMD 构建版本（即 dist/chart.js、dist/chart.min.js 等）。

require(['path/to/chartjs/dist/chart.min.js'], function(Chart){
    const myChart = new Chart(ctx, {...});
});

注意：为了使用时间刻度，在需要 Chart.js 后，我们需要确保其中一个可用的日期适配器和相应的日期库已完全加载。 为此，我们可以使用嵌套要求：

require(['chartjs'], function(Chart) {
    require(['moment'], function() {
        require(['chartjs-adapter-moment'], function() {
            new Chart(ctx, {...});
        });
    });
});

Chart.js 使用

Chart.js 可以与 ES6 模块、纯 JavaScript 和模块加载器一起使用。

要创建图表，我们需要实例化 Chart 类。 为此，我们需要传入要绘制图表的 canvas 的节点、jQuery 实例或 2d 上下文。 这是一个例子。

<canvas id="myChart" width="400" height="400"></canvas>

// 可以使用以下任何格式
const ctx = document.getElementById('myChart');
const ctx = document.getElementById('myChart').getContext('2d');
const ctx = $('#myChart');
const ctx = 'myChart';

获得元素或上下文后，我们就可以实例化预定义的图表类型或创建自己的图表类型了！

以下示例实例化了一个条形图，显示不同颜色的投票数和从 0 开始的 y 轴。

<canvas id="myChart" width="400" height="400"></canvas>
<script>
const ctx = document.getElementById('myChart');
const 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],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>