Question

我正在尝试使用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，但效果相同。

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

Answer 1

您实际上是两次调用新的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>

Answer 2

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

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

完成动画后，图表就会消失

2 个答案: