Question

我目前正在使用Chart.js，我需要在两个不同的数据集之间进行更改。为此，我只需更改数据集并使用更新功能。主要问题是，当您在数据集之间多次更改时，动画会消失，并且看起来很糟糕。

Here你可以看到我在说什么和我的代码。有人知道我该怎么办？非常感谢！

这是我的代码，以防链接不起作用：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Chart.js Example</title>
    <!-- import plugin script -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js'></script>
  </head>
  <body>
    <!-- bar chart canvas element -->
    <canvas id="chart" width="600" height="400"></canvas>
    <button onclick="manageCharts()" id="chartDataButton">Chart 2</button>
</body>
</html>

和javascript代码

  Chart.defaults.global.responsive = false;

  var chartData1 = {
    labels : ["L1", "l2", "l3", "l4"],
    datasets : [{
        label: "LEGEND",
        data : [13, 23, 9, 4],
        backgroundColor: "#FF88CC",
        borderColor: "#000000",
        borderWidth: 1,
    }]
  }

  var chartData2 = {
    labels : ["L11", "L12"],
    datasets : [{
        label: '{{ legend }}',
        data : [7, 1],
        backgroundColor: "#FEFE65",
        borderColor: "#00FFFF",
        borderWidth: 2,
    }]
  }

  var pieChartOptions = {
    rotation: -Math.PI,
    cutoutPercentage: 30,
    circumference: Math.PI,
    legend: {
      position: 'left'
    },
    animation: {
      animateRotate: true,
      animateScale: false
    }
  };

  // get chart canvas
  var ctx = document.getElementById("chart").getContext("2d");

  var pieChart = new Chart(ctx, {
    type: 'pie',
    data: chartData1,
    options: pieChartOptions
  });

  function manageCharts(){
    var button = document.getElementById("chartDataButton");
    var previousData = pieChart.config.data;

    if(previousData == chartData1){
      button.textContent = "Chart 1";
      showChart2Data();
    }else if(previousData == chartData2){
      button.textContent = "Chart 2";
      showChart1Data();
    }
  }

  function showChart2Data(){
    pieChart.config.data = chartData2;
    pieChart.update();
  };

  function showChart1Data(){
    pieChart.config.data = chartData1;
    pieChart.update();
  };

Answer 1

我已在this jsfiddle更新了您的代码，以使用destroy()功能。

使用update()似乎无法重置动画。

使用destroy()删除图表，然后您的代码将重新创建新图表（和动画）

PS：很抱歉从JS Bin换到jsfiddle。我在JS Bin中遇到了麻烦。

更新图表数据时的Chart.js动画

1 个答案: