JavaScript Chart.js

JavaScript Chart.js 完整攻略

简介

JavaScript Chart.js 是一个基于 HTML5 canvas 技术实现的图表库。它支持各种图表类型，例如线图、柱状图、饼图等等，并且易于使用和定制。

安装 Chart.js

通过 npm：

npm install chart.js

通过 CDN：

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

基本用法

创建一个 canvas 元素并指定宽度和高度，然后使用 JavaScript 创建一个 Chart 对象并设置其类型、数据和选项。

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

<script>
  const 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
    }]
  };

  const options = {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };

  const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
  });
</script>

在这个例子中，我们创建了一个柱状图，并设置了它的数据和选项。

示例 1：饼图

以下是一个简单的饼图示例，展示了 2020 年美国总统选举中最受欢迎的候选人。

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

<script>
  const data = {
    labels: ['Biden', 'Trump', 'Others'],
    datasets: [{
      label: '# of Votes',
      data: [81.2, 74.2, 8.3],
      backgroundColor: [
        'rgba(0, 128, 0, 0.6)',
        'rgba(255, 51, 0, 0.6)',
        'rgba(128, 128, 128, 0.6)'
      ],
      borderWidth: 1
    }]
  };

  const options = {};

  const ctx = document.getElementById('myPieChart').getContext('2d');
  const myPieChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: options
  });
</script>

在这个例子中，我们创建了一个饼图，并设置了它的数据和选项。

示例 2：单个标签的线图

以下是一个带有单个标签的线图示例，展示了某个网站在过去一周内的页面浏览量。

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

<script>
  const data = {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
    datasets: [{
      label: 'Page views',
      data: [150, 200, 350, 400, 450, 300, 250],
      backgroundColor: 'rgba(0, 0, 255, 0.2)',
      borderColor: 'rgba(0, 0, 255, 1)',
      borderWidth: 1
    }]
  };

  const options = {};

  const ctx = document.getElementById('myLineChart').getContext('2d');
  const myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
  });
</script>

在这个例子中，我们创建了一个线图，并设置了它的数据和选项。

总结

以上是 JavaScript Chart.js 的基本用法和示例。Chart.js 支持各种类型的图表，通过设置数据和选项可以轻松实现各种功能和定制。希望这篇攻略对你有所帮助。