动画结束后图表消失了

Question

我正在尝试使用chartjs，因此我从官方文档中复制了如下的示例代码。

<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中运行，结果都是一样的。

这是怎么发生的，怎么解决？

- ironsand

---

相关链接：http://stackoverflow.com/questions/33501151/piechart-disappears-on-mouseout - Shog9

Answer 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>

- SajithNair

Answer 2

如果您正在使用Bootstrap，请注意

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

- Derrick Miller