chart.js 如何使用

如何使用 Chart.js？安装 Chart.js（CDN 或 NPM）创建图表对象（获取画布元素、设置图表类型、数据和选项）自定义图表（使用广泛的选项，如标题、网格线、图例和交互性）

如何使用 Chart.js

Chart.js 是一个免费的开源 JavaScript 库，用于在 Web 应用程序中创建交互式图表。它提供了一个简单易用的 API，可以轻松创建各种类型的图表，包括条形图、折线图、饼图和雷达图。

安装 Chart.js

要使用 Chart.js，您需要将其包含到您的 HTML 文件中。您可以通过以下方式之一进行：

• 使用 CDN：

  <code class="html"><script src="https://unpkg.com/chart.js@latest/dist/Chart.min.js"></script></code>

  登录后复制

• 从 NPM 安装：

  <code>npm install chart.js</code>

  登录后复制

创建图表

要创建一个图表，您需要：

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

27

查看详情

1. 获取画布元素：

   <code class="js">const canvas = document.getElementById('myChart');</code>

   登录后复制

2. 创建一个图表对象：

   <code class="js">const chart = new Chart(canvas, {
     type: 'bar',
     data: {
       labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
       datasets: [{
         label: 'Sales',
         data: [10, 20, 30, 40, 50]
       }]
     },
     options: {
       // 图表选项
     }
   });</code>

   登录后复制

自定义图表

Chart.js 提供了广泛的选项，允许您自定义图表的外观和行为。这些选项在 options 对象中设置。一些常见的选项包括：

• 标题： title
• 网格线： scales
• 图例： legend
• 工具提示： tooltips
• 交互性： interaction

示例

以下是一个创建条形图的示例：

<code class="js">const canvas = document.getElementById('myChart');
const chart = new Chart(canvas, {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [{
      label: 'Sales',
      data: [100, 200, 300, 400, 500]
    }]
  },
  options: {
    title: {
      text: 'Monthly Sales'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});</code>

以上就是chart.js 如何使用的详细内容，更多请关注php中文网其它相关文章！