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, {});
      }
    }
  }
});

我在像这样的

<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]}]}"。

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

我尝试过两个遇到同样问题的angularjs chartjs库，使用自己的指令来验证数据是否真正进入了chartjs库。仍然没有坚果。我做错了什么？

Answer 1

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

<canvas>的父级<answers-plot>，<answers-plot>的宽度和高度均为0.似乎Chartjs根据<canvas>的父元素的大小，它导致画布的宽度和高度为0.

我使用<div>将<canvas>打包在我的指令模板中，并为<div>提供了非零大小或
将responsive（在Chartjs＆＃39;}选项中）设置为false，问题就解决了。

Answer 2

我发现Aurelia（而不是Angular）的行为类似 - 它不喜欢在自定义名称的元素中删除图表，在你的情况下是“答案 - 情节”。使用Aurelia，我可以在我的自定义元素中添加“无容器”，它可以工作。我不确定Angular指令 - 可能在指令选项中替换：true或transclude：true吗？

Answer 3

width元素的height和<canvas>属性是无单位的，因此请使用：

template: '<canvas width="100" height="100" style="width:100px; !important height:100px; !important"></canvas>'

为什么ChartJS图表的宽度为0，高度为0？

3 个答案: