Javascript 选项卡中的图表

我在代码中的w/a部分中挣扎，我想在选项卡中显示图表。每个选项卡应包含一个特定的图表。 对于选项卡，我使用了

angularmatel 1.1.0

的指令

md-tab

，用于

angularjs

。对于图表，我使用的是

Chart.js

。 基本上，

Chart.js

使用画布显示图表。请参见此图表显示示例：

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>

然而。。。它不起作用。 我在“var myChart=new Chart[etc.]”行有一个错误，好像找不到具有正确ID的画布

但是，当我检查代码时，画布确实具有正确的ID。 所以我认为这可能是一个渲染的问题；select=“drawChart（thisComponent，$index）”上的

md似乎是在呈现画布的id之前启动的。这就是为什么drawChart函数在运行时找不到具有正确ID的画布的原因

我尝试了不同的解决方案，但我正在努力


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

使用加载指令：无法使其工作


（我发现了类似的问题，但它们只涉及有限数量的选项卡。就我而言，我不知道我的数据中将包含多少选项卡）

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