我在我的代码中的一个部分正在努力，我希望在选项卡中显示图表 . 每个选项卡应包含特定图表 . 对于选项卡，我使用 AngularMaterial 1.1.0 的 md-tab 指令作为 Angular JS . 对于图表，我使用 Chart.js . 基本上， Chart.js 使用canvas来显示图表 . 请参见图表显示示例：

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ]
    }]
  }
});

在我看来，chart.js使用canva ID来显示其中的图表 .

知道了，这是我的代码：

HTML：

<md-tabs id="results" class="md-primary"  md-center-tabs md-swipe-contents md-dynamic-height>
  <md-tab id="tab{{$index+1}}" ng-repeat="thisResultComponent in statistics track by $index" md-on-select="drawChart(thisResultComponent, $index)">
    <md-tab-label> {{thisResultComponent.tablabel}} </md-tab-label>
    <md-tab-body class="result-content">
      <canvas class="result-chart" id="chart{{$index}}"> </canvas>
    </md-tab-body>
  </md-tab>
</md-tabs>

控制器（js）：

$scope.drawBarChart = function(thisComponent, thisIndex) {
  var ctx = document.getElementById("chart"+thisIndex);
  var myChart = new Chart(ctx, {
    type: "bar",
    data: thisComponent.chartData,
    options: thisComponent.chartOptions
  });
};

但是......它不起作用 . 我在行“var myChart = new Chart [etc . ]”时出错，好像无法找到具有正确ID的画布 .

但是，当我检查我的代码时，画布确实有正确的ID . 所以我认为这可能是一个渲染问题; md-on-select = "drawChart(thisComponent, $index)" 似乎是在渲染画布的id之前启动的 . 这可以解释drawChart函数在运行时无法找到具有正确ID的画布...

我尝试了不同的解决方案，但我很挣扎！

  • 使用ng-include w /索引作为子范围中的变量：无法使其工作

  • 使用on-load指令：无法使其工作

（我发现了类似的问题，但它们只涉及有限数量的标签 . 在我的情况下，我不知道我的数据中会有多少标签） .

javascript angularjs canvas chart.js