# 切换数据

URL: https://caijiao.org/chartjs/05-dynamic/01-toggle-data
Source: docs/chartjs/05-dynamic/01-toggle-data.md
Description: 讲解如何使用 JavaScript 实现 Chart.js 图表数据的动态切换功能，包括更新数据、重新渲染图表和结合按钮交互操作。

在 [Chart.js](/chartjs/) 中，可以通过编程方式动态更新图表的数据，实现如“日/周/月”、“不同维度”等视图切换。通过操作 `chart.data` 并调用 `chart.update()` 方法，即可实时刷新图表。结合按钮或下拉菜单等控件，可以让用户在前端自由切换数据视图。

```js
(function () {
  const ctx = document.getElementById("switchChart").getContext("2d");
  const chartData = {
    week: [12, 19, 3, 5, 2, 3, 7],
    month: [60, 75, 82, 90, 76, 88, 95],
  };

  const myChart = new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      datasets: [
        {
          label: "访问量",
          data: chartData.week,
          backgroundColor: "rgba(54, 162, 235, 0.7)",
        },
      ],
    },
    options: {
      responsive: true,
      plugins: {
        legend: { display: true },
      },
    },
  });

  document.getElementById("btnWeek").addEventListener("click", () => {
    myChart.data.datasets[0].data = chartData.week;
    myChart.update();
  });

  document.getElementById("btnMonth").addEventListener("click", () => {
    myChart.data.datasets[0].data = chartData.month;
    myChart.update();
  });
})();
```

[在线代码演示](/chartjs/demos/16.html)