我正在努力解决我的代码中我希望在标签中显示图表的部分。每个选项卡应包含特定图表。
对于标签，我使用md-tab的{{1}}指令作为AngularMaterial 1.1.0。对于图表，我使用的是Angular JS。
基本上，Chart.js使用canvas来显示图表。请参见图表显示示例：
Chart.js在我看来，chart.js使用canva ID来显示其中的图表。
知道，这是我的代码：
HTML：
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)'
]
}]
}
});
Controller（js）：
<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>
然而......它不起作用。 我在行＃34; var myChart = new Chart [etc。]＆＃34;上有错误，好像无法找到具有正确ID的画布。
但是，当我检查我的代码时，画布确实有正确的ID。
所以我认为这可能是一个渲染问题; $scope.drawBarChart = function(thisComponent, thisIndex) {
var ctx = document.getElementById("chart"+thisIndex);
var myChart = new Chart(ctx, {
type: "bar",
data: thisComponent.chartData,
options: thisComponent.chartOptions
});
};
似乎是在渲染画布的id之前启动的。这可以解释drawChart函数在运行时无法找到具有正确ID的画布...
我尝试了不同的解决方案，但我很挣扎！
使用ng-include w /索引作为子范围中的变量：无法使其正常工作
使用on-load指令：无法使其正常工作
（我发现了类似的问题，但它们只涉及数量有限的标签。在我的情况下，我不知道我的数据中会有多少标签。）