Chart.js未在我的视图中显示

我有一个应用程序以angular.js运行，我的一个视图应该加载图表。我使用chart.js，但由于某种原因，它不工作，我的控制台上没有显示错误。这里是我的函数创建图表：Chart.js未在我的视图中显示

$scope.writeBatteryChart = function(){ 
     console.log("Function was called"); 
     var data = { 
      labels: ["10:30am", "11:00am", "11:30am", "12:00pm", "12:30pm", "01:00pm", "01:30pm"], 
      datasets: [ 
       { 
        label: "Battery", 
        fillColor: "rgba(220,220,220,0.2)", 
        strokeColor: "rgba(220,220,220,1)", 
        pointColor: "rgba(220,220,220,1)", 
        pointStrokeColor: "#fff", 
        pointHighlightFill: "#fff", 
        pointHighlightStroke: "rgba(220,220,220,1)", 
        data: [65, 59, 80, 81, 56, 55, 40] 
       } 
      ] 
     }; 

     var options = { 
      responsive: true, 
      bezierCurve : false 
     } 

     var ctx = document.getElementById("myChart").getContext("2d"); 
     var myLineChart = new Chart(ctx).Line(data, options); 

    }

在此处，图表应该出现在HTML：

   <div class="row"> 
        <div class="col-md-8 col-sm-8 col-xs-8" style="padding-left: 0px;"> 
         <div class="panel panel-info"> 
          <div class="panel-heading"> 
          <h3 class="panel-title">Battery <i class="fi-battery-half"></i></h3> 
          </div> 
          <div class="panel-body"> 
          <canvas id="myChart" height="300"></canvas> 
          </div> 
         </div> 
        </div> 
        <div class="col-md-4 col-sm-4 col-xs-4" style="padding-left: 0px; padding-right: 0px;"> 

        </div> 
       </div>

，我还加载了最新版本的chart.js之的：

我注意到

<!--Chart plugin --> 
    <script src="bower_components/Chart.js/Chart.js" language="javascript"></script>

一件事是，在画布上正在呈现以0尺寸：

0 dimensions on the canvas

有人可以看到我在做什么错吗？

来源

2015-04-02 Joab Mendes

问题：我在画布加载到视图之前调用函数，所以我用setTimeout()延迟调用writeBatteryChart()以等待画布呈现。

来源

2015-04-02 04:34:20

我在尝试在ajax调用完成之前加载数据时遇到过类似的问题，所以我先调用了ajax并设置了onSuccess回调绘制图表，相关问题：https：//stackoverflow.com/questions/19894952/draw-a -chart-JS-与阿贾克斯数据和响应-A-为数不多的问题，和问题 – bitsnaps 2018-01-02 14:33:43

你必须在画布中添加你的渲染的东西。希望这会有所帮助Link

来源

2015-04-02 01:21:22 Shaxrillo

Chart.js未在我的视图中显示

回答

相关问题