我是chart.js的新手,并尝试在角度材质网格列表中绘制图表。我使用的是angular-chart.js和chart.js.I已将这些包含在CDN中
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="http://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
我没有错误。 图表没有被绘制,我也不明白我哪里出错了。
app.controller('chartctrl',function($scope,$timeout){
$timeout(function(){
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
},1000);
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
$scope.options = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
},
{
id: 'y-axis-2',
type: 'linear',
display: true,
position: 'right'
}
]
}
};
})
&#13;
<div ng-cloak="" class="gridListdemoBasicUsage" ng-app="MyApp">
<md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md- cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="2:2" md-gutter="12px" md-gutter-gt-sm="8px">
<md-grid-tile class="gray" md-rowspan="3" md-colspan="2" md-colspan-sm="1" md-colspan-xs="1">
<md-card style="height:100%;width:100%">
<md-card-content>
<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-series="series" chart-options="options"
chart-dataset-override="datasetOverride" chart-click="onClick">
</canvas>
</md-card-content>
</md-card>
</md-grid-tile>
</md-grid-list>
</div>
&#13;