为什么ChartJS图表最终以宽度0和高度0结尾？

Question

我有以下angularJS指令

app.directive('answersPlot', function() {
  return {
    scope: {
      chartData: "=chartData",
      chartType: "=chartType"
    },
    template: '<canvas width="100px" height="100px" style="width:100px; !important height:100px; !important"></canvas>',
    link: function(scope, element, attrs) {
      var canvas = element[0].childNodes[0];
      var context = canvas.getContext('2d');
      var chart = new Chart(context);

      if (scope.chartType == 0) {
        chart.Bar(scope.chartData, {});
      } else {
        chart.Pie(scope.chartData, {});
      }
    }
  }
});

我正在像这样的ng-repeat DOM块中实例化它

<div ng-repeat="question in talk.questions track by $index">
  <answers-plot chart-data="question.chartData" chart-type="question.chartType"></answers-plot>
</div>

但是，当我检查DOM时，我发现了这一点

<answers-plot chart-data="question.chartData" 
chart-type="question.chartType" 
class="ng-isolate-scope">
  <canvas width="0" height="0" style="width: 0px; height: 0px;"></canvas>
</answers-plot>

没有错误登录到控制台。chartData具有以下格式："{"labels":["A","C","D","B"],"datasets":[{"data":[0,2,0,1]}]}"。

手动更改width / height值（在CSS中和作为属性）只会产生更大的空白画布。

我尝试了两个遇到相同问题的angularjs chartjs库，诉诸于编写自己的指令来验证数据是否确实进入了chartjs库。仍然没有坚果。我究竟做错了什么？

Answer 1

前几天我遇到了同样的问题。
我发现：

的父级<canvas>为<answers-plot>，其<answers-plot>的width和height为0。似乎Chartjs根据其父级元素的大小调整其图表大小<canvas>会导致画布的width和height为0。

我使用<div>来包装<canvas>指令模板中的，并给赋予了非零的大小，<div>
或
将responsive（在Chartjs的选项中）设置为false，问题得以解决。