在 Chart.JS 中动态设置动画

Question

我尝试在 Chart.js 中动态设置 animation。它应该根据某些条件启用或禁用。

但由于某种原因它总是处于启用或禁用状态。

我做了一个 JSFiddle 来更好地描述我的问题

查看下面的代码：

<div class="container">

   <button onclick="chart(true)">ANIMATION</button>

   <button onclick="chart(false)">NO ANIMATION</button>
    
   <div id="animation-info"></div>
 
   <canvas id="chart-container" width="300" height="200"></canvas>

</div>

let animation = true
let CHART

chart(animation)


function chart(animation) {

  const anim_duration = animation == false 
  ? { duration : 0 }
  : { duration : 1000 }
  
  document.getElementById('animation-info').innerHTML =  `<br>Animation: ${animation} <br> Animation duration: ${anim_duration.duration}`

  
  // generate dataset with random values
  // random values are actual chart values here
  var dataset = Array.from( { length: 6 }, () => Math.floor(Math.random() * 6 + 1 ))
  
  var options = {
    type: 'doughnut',
   
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
          label: '# of Votes',
          data: dataset,
          backgroundColor: [ "Red", "Blue", "Yellow", "Green", "Purple", "Orange" ],
          borderWidth: 1,
        }
      ]
    },
    options: {
       animation: anim_duration,
       cutoutPercentage : 60,
       responsive: true,
    }
  }
  
  var ctx = document.getElementById('chart-container').getContext('2d')


  if (typeof CHART == "undefined")
        CHART = new Chart(ctx, options)

  else {
        CHART.config = options  // updating with new chart data
        CHART.update()               // redraw the chart
  }
}

.container {
  text-align: center;
  padding: 20px;
}

#animation-info {
  padding: 5px;
  font-size: 16px;
  font-family: Arial;
}

canvas { 
  opacity : 0.7; 
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  margin: 10px;
}

我也试过像

那样直接设置选项

Chart.defaults.global.animation.duration = duration

似乎是同一个问题。

我认为问题是因为我不是每次都调用 new Chart(ctx, options)，而是只更新图表配置数据。

我这样做是为了节省资源，因为我多次重建图表并且每次调用 new Chart(ctx, options) 似乎是一个相当繁重的操作。

解法：

正如 LeeLenalee 在他下面的评论中所建议的，添加

CHART.options.animation.duration = animation == false ?  0 : 1000`

之前CHART.update()做了个把戏

if (typeof CHART == "undefined")
    CHART = new Chart(ctx, options)

else {
     CHART.config = options  // updating with new chart data
     CHART.options.animation.duration = animation == false ? 0 : 1000
     CHART.update()               // redraw the chart
}

Answer 1

您试图将选项设置错误。两个版本都有效。如果您想将其设置为默认值，则必须这样设置：Chart.defaults.global.animation.duration = animation ? 1000 : 0。你也可以像这样把它放在你的选项对象中：

const anim_duration = { duration : animation ? 1000 : 0 }

options: {
  animation: anim_duration
}

Fiddle: https://jsfiddle.net/Leelenaleee/58pxb1j2/9/

评论澄清后编辑：在更新方法中设置动画 CHART.options.animation.duration = animation ? 1000 : 0; 然后调用更新。

在 Chart.JS 中动态设置动画

Set animation dynamically in Chart.JS

javascript

chart.js

chart.js2