angularjsのcharts.jsに対応するグラフ

Question

タイトルが言うように、応答性の高いチャートjsを作成しようとしています。私はここからcharts.jsのフレームワークを使用します。 http://jtblin.github.io/angular-chart.js/。私は角度がついていないので、フレームワークのコンセプトは私にはあいまいです。

グラフが不均衡になる場合は、キャンバスにdivを含む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

responsive: true, 
maintainAspectRatio: false 

は、ドキュメントを見て、あなたの$scope.optionsであなたが拡張しようとすることができ

chart.js responsive docs