时间戳

首页 > 解决方案 > 使用同一画布在不同 Chart.js 图表之间切换

javascript - 使用同一画布在不同 Chart.js 图表之间切换

问题描述

我有一个带有一个大画布的页面，以及一个由代表不同图表的多个 div 填充的菜单。每次我从菜单中单击一个 div 时，画布上的图表都会发生变化。

将相同的画布分配给不同的图表会使画布在鼠标移动时发疯。

每当单击菜单中的图表时，我尝试运行 chart.update() 并清除画布，但问题仍然存在。

标签： javascriptjquerycanvaschart.js

解决方案

更改图表类型是一个根本区别，您需要完全destroy()现有图表，然后实例化一个新实例。否则，Chart.js 在实例化时选择的默认值无效，正如您所注意到的，这会导致一些奇怪的行为。

以下代码段演示了一种方法：

let chart;

function mychart(type) {
  if (chart) {
    chart.destroy();
  }
  chart = new Chart(document.getElementById("chart"), {
    type: type,
    data: {
      labels: ["a", "b", "c", "d"],
      datasets: [{
        label: "Series1",
        data: [0, 1, 2, 4]
      }]
    }
  })
}

document.getElementById("line").addEventListener("click", function() {
  mychart("line");
});

document.getElementById("bar").addEventListener("click", function() {
  mychart("bar");
});

document.getElementById("doughnut").addEventListener("click", function() {
  mychart("doughnut");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<p>
  <button id="line">Line</button>
  <button id="bar">Bar</button>
  <button id="doughnut">Doughnut</button>
</p>
<canvas id="chart"></canvas>

推荐阅读