配置相同但数据不同的多个chartjs图表

基础概念

Chart.js 是一个基于 HTML5 Canvas 的 JavaScript 图表库，它允许开发者创建各种类型的图表，如折线图、柱状图、饼图等。每个图表都由一组配置选项（options）和一个数据集（dataset）组成。

类型

Chart.js 支持以下几种主要图表类型：

折线图（Line Chart）
柱状图（Bar Chart）
饼图（Pie Chart）
雷达图（Radar Chart）
散点图（Scatter Chart）
气泡图（Bubble Chart）

应用场景

数据可视化：用于展示和分析各种数据集。
报告生成：在报告中嵌入图表以增强可读性。
仪表盘：在仪表盘上展示关键指标。
教育：用于教学和演示数据。

配置相同但数据不同的多个 Chart.js 图表

假设我们有两个柱状图，它们的配置相同但数据不同。我们可以通过以下步骤来实现：

HTML 结构

<div>
  <canvas id="chart1"></canvas>
  <canvas id="chart2"></canvas>
</div>

JavaScript 代码

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

<script>
  // 定义相同的配置选项
  const commonOptions = {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  };

  // 数据集1
  const data1 = {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Dataset 1',
      data: [65, 59, 80, 81, 56],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }]
  };

  // 数据集2
  const data2 = {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Dataset 2',
      data: [28, 48, 40, 19, 86],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255, 99, 132, 1)',
      borderWidth: 1
    }]
  };

  // 创建图表1
  const ctx1 = document.getElementById('chart1').getContext('2d');
  new Chart(ctx1, {
    type: 'bar',
    data: data1,
    options: commonOptions
  });

  // 创建图表2
  const ctx2 = document.getElementById('chart2').getContext('2d');
  new Chart(ctx2, {
    type: 'bar',
    data: data2,
    options: commonOptions
  });
</script>

遇到的问题及解决方法

问题：图表显示不正确或空白

原因：

数据格式错误：数据集的格式不正确。
Canvas 元素未正确加载：在 Canvas 元素还未加载完成时就尝试创建图表。
Chart.js 库未正确引入：Chart.js 库未正确加载。

解决方法：

检查数据集的格式是否正确，确保每个数据集都有 labels 和 datasets。
确保在 DOM 完全加载后再创建图表，可以使用 window.onload 或 document.addEventListener('DOMContentLoaded', ...)。
确保 Chart.js 库已正确引入，可以通过检查控制台是否有错误信息来确认。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiple Charts</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <div>
    <canvas id="chart1"></canvas>
    <canvas id="chart2"></canvas>
  </div>

  <script>
    window.onload = function() {
      const commonOptions = {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      };

      const data1 = {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
          label: 'Dataset 1',
          data: [65, 59, 80, 81, 56],
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }]
      };

      const data2 = {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
          label: 'Dataset 2',
          data: [28, 48, 40, 19, 86],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 1
        }]
      };

      const ctx1 = document.getElementById('chart1').getContext('2d');
      new Chart(ctx1, {
        type: 'bar',
        data: data1,
        options: commonOptions
      });

      const ctx2 = document.getElementById('chart2').getContext('2d');
      new Chart(ctx2, {
        type: 'bar',
        data: data2,
        options: commonOptions
      });
    };
  </script>
</body>
</html>