Javascript 帆布赢了'；t显示_Javascript_Jquery_Angularjs_Canvas_Charts

Javascript 帆布赢了'；t显示

javascript jquery angularjs canvas charts

Javascript 帆布赢了'；t显示,javascript,jquery,angularjs,canvas,charts,Javascript,Jquery,Angularjs,Canvas,Charts,使用Chart js时遇到了一些麻烦。我试图从web服务中提取一些数据（我做得很好），但当我试图将其放入图表中时，图表不会显示。我从中提取的数据很好。控制台打印出预期值，即使间隔也可以确保没有任何变化另外，canvasdiv也会显示在页面上，只是图表没有动画。这里的html非常简单，因为我只是将其用于一个小部件： <body ng-app="myapp" ng-controller="MainCtrl"> <div id="canvas-holder">

使用Chart js时遇到了一些麻烦。我试图从web服务中提取一些数据（我做得很好），但当我试图将其放入图表中时，图表不会显示。我从中提取的数据很好。控制台打印出预期值，即使间隔也可以确保没有任何变化

另外，

canvas

div也会显示在页面上，只是图表没有动画。这里的html非常简单，因为我只是将其用于一个小部件：

  <body ng-app="myapp" ng-controller="MainCtrl">
    <div id="canvas-holder">
      <canvas id="chart-area" width="500" height="500"></canvas>
    </div>
    <button id="randomizeData">Randomize Data</button>
  </body>


随机化数据

这样你就能更好地理解发生了什么。如果查看控制台，您可以看到没有错误。

输入此代码

var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut($scope.doughnutData, {
    responsive: true
});

内部成功回调。这将得到解决

.success(function(returnedData) {    
     $scope.doughnutData = sortByKey($scope.doughnutData, 'value');

     // Put code here

});

你能帮我更新一下plunker吗？我试着编辑它，但它在一瞬间就消失了。我链接的plunker中有更新的代码，因此您可以按照相同的链接进行查看？