图表在完成动画后消失答案

【问题标题】：Chart disappears just after finishing animation图表在完成动画后消失
【发布时间】：2020-11-10 01:27:31
【问题描述】：

我正在尝试使用chartjs，所以我像这样从official document 复制了示例代码。

<canvas id="myChart" width="400" height="400"></canvas>
<script>
 var data = {
   labels : ["January","February","March","April","May","June","July"],
   datasets : [
 {
   fillColor : "rgba(220,220,220,0.5)",
   strokeColor : "rgba(220,220,220,1)",
   pointColor : "rgba(220,220,220,1)",
   pointStrokeColor : "#fff",
   data : [65,59,90,81,56,55,40]
 },
 {
   fillColor : "rgba(151,187,205,0.5)",
   strokeColor : "rgba(151,187,205,1)",
   pointColor : "rgba(151,187,205,1)",
   pointStrokeColor : "#fff",
   data : [28,48,40,19,96,27,100]
 }
   ]
 }
 //Get the context of the canvas element we want to select
 var ctx = document.getElementById("myChart").getContext("2d");
 var myNewChart = new Chart(ctx).PolarArea(data);
 new Chart(ctx).Line(data);
</script>

示例：http://jsfiddle.net/DerekL/FZW9z/

图表一开始会出现，但当第一个动画结束时它会消失。 Javascript 控制台什么也没显示。而当一个选项animation 被定义为false 时，它只会在瞬间出现并同样消失。

我在 Mac 上尝试了 Firefox 和 Chrome，但结果是一样的。

它是如何发生的，我该如何解决？

【问题讨论】：

相关：stackoverflow.com/questions/33501151/…

标签： javascript chart.js

【解决方案1】：

您实际上是在调用 new Chart() 两次。请看下面的代码。我连接了不需要的线路。另请参阅更新后的 JSFiddle http://jsfiddle.net/sajith/VW4U5/

<canvas id="myChart" width="400" height="400"></canvas>
<script>
 var data = {
   labels : ["January","February","March","April","May","June","July"],
   datasets : [
 {
   fillColor : "rgba(220,220,220,0.5)",
   strokeColor : "rgba(220,220,220,1)",
   pointColor : "rgba(220,220,220,1)",
   pointStrokeColor : "#fff",
   data : [65,59,90,81,56,55,40]
 },
 {
   fillColor : "rgba(151,187,205,0.5)",
   strokeColor : "rgba(151,187,205,1)",
   pointColor : "rgba(151,187,205,1)",
   pointStrokeColor : "#fff",
   data : [28,48,40,19,96,27,100]
 }
   ]
 }
 //Get the context of the canvas element we want to select
 var ctx = document.getElementById("myChart").getContext("2d");
 //var myNewChart = new Chart(ctx).PolarArea(data);
 new Chart(ctx).Line(data);
</script>

【讨论】：

【解决方案2】：

如果您使用的是 Bootstrap，请注意

我遇到了同样的问题。我还在 Laravel 项目中使用 Bootstrap。事实证明存在某种冲突 - 每当加载 Bootstrap 的 JS 时，都会导致图表消失。我的解决方案是从加载我的 app.js 文件的代码中删除“延迟”属性，如下所述：Laravel - Bootstrap Javascript's conflict with Chart.js

【讨论】：