Chart.js -岩石教程

特点

多种图表类型：支持折线图、柱状图、饼图、雷达图、极地区域图、气泡图和散点图等多种图表类型。
简单易用：直观的 API 设计，使得开发者可以轻松创建和自定义图表。
响应式设计：支持响应式图表，自动调整尺寸以适应不同设备和屏幕大小。
动画效果：内置丰富的动画效果，提升用户体验。
高度可定制：提供丰富的配置选项，可以自定义图表的外观和行为。
扩展性：支持插件机制，允许开发者扩展和增强图表功能。
开源社区：拥有活跃的开源社区，提供大量示例、文档和支持。

使用场景

数据可视化：在 Web 应用中展示数据，提供直观的可视化效果。
仪表盘：创建交互式仪表盘，展示关键业务指标和数据分析结果。
报告生成：生成图表报告，方便数据分析和分享。
实时数据监控：展示实时数据变化，如股票价格、传感器数据等。
教育和培训：用于教学和培训，帮助学生理解数据和图表的概念。

安装方式

通过 npm 安装 Chart.js：

npm install chart.js

通过 CDN 引入 Chart.js：

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

使用示例

创建一个简单的折线图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="200"></canvas>
  <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
          label: 'My First dataset',
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255, 99, 132, 1)',
          data: [0, 10, 5, 2, 20, 30, 45]
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

创建一个柱状图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chart.js Bar Chart Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="barChart" width="400" height="200"></canvas>
  <script>
    var ctx = document.getElementById('barChart').getContext('2d');
    var barChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '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: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

常用 API 介绍

Chart()：创建一个新的图表实例。

var myChart = new Chart(ctx, {
  type: 'line',
  data: {...},
  options: {...}
});

data：定义图表的数据，包括 labels 和 datasets。

data: {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'My First dataset',
    data: [0, 10, 5, 2, 20, 30, 45]
  }]
}

options：配置图表的选项，如响应式、缩放、图例等。

options: {
  responsive: true,
  scales: {
    y: {
      beginAtZero: true
    }
  }
}

type：定义图表的类型，如 'line', 'bar', 'pie', 'radar', 'polarArea', 'bubble', 'scatter'。
```
type: 'bar'
```

update()：更新图表的数据和配置。

myChart.data.datasets[0].data = [10, 20, 30, 40];
myChart.update();

destroy()：销毁图表实例，释放资源。
```
myChart.destroy();
```

官方资料

Chart.js 是一个功能强大且易于使用的 JavaScript 图表库，适用于各种数据可视化需求。其丰富的图表类型和配置选项，使得开发者可以快速创建高质量的图表，提升 Web 应用的数据展示效果。