菜鸟教程
教程 chartjs tutorial

切换数据

在 Chart.js 中，可以通过编程方式动态更新图表的数据，实现如“日/周/月”、“不同维度”等视图切换。通过操作 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();
  });
})();
在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>Chart.js 切换数据</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
<style>
body {
max-width: 700px;
margin: 2rem auto;
font-family: sans-serif;
background: #f9f9f9;
padding: 1rem;
text-align: center;
}


canvas {
  background: #fff;
  border: 1px solid #ccc;
  margin: 1rem auto;
}

button {
  margin: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 14px;
  cursor: pointer;
}



</style>
</head>


<body>
<div>
<button id="btnWeek">周数据</button>
<button id="btnMonth">月数据</button>
</div>
<canvas id="switchChart" width="700" height="400"></canvas>
<script>
(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', () =&gt; {
    myChart.data.datasets[0].data = chartData.week;
    myChart.update();
  });

  document.getElementById('btnMonth').addEventListener('click', () =&gt; {
    myChart.data.datasets[0].data = chartData.month;
    myChart.update();
  });
})();



</script>
</body>


</html>

相关内容