在angularjs與chart.js響應圖表

Question

即時通訊嘗試做出響應圖表js，如標題所述。我從這裏使用了來自charts.js的框架。 http://jtblin.github.io/angular-chart.js/。我是新角色，所以框架的概念對我來說很模糊。

我想讓畫布與包含它的div具有相同的大小，如果圖表不對稱，則無關緊要。如果你能幫助我...現在我正在從網站的第一個例子。

<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> 

Javascript代碼

angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope) { 

$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] 
]; 
$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' 
     } 
    ] 
    } 
}; 
}); 

Answer 1

你可以嘗試擴展您的$scope.options與

responsive: true, 
maintainAspectRatio: false 

看看該文檔chart.js responsive docs