带有chart.js的angularjs中的响应图

Question

我正在尝试制作一个响应式图表js，如标题所示。 我从这里使用Charts.js中的框架。 http://jtblin.github.io/angular-chart.js/ 。 我对angular还是陌生的，所以框架的概念对我来说很模糊。

我想使画布具有与包含它的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

看看docs chart.js响应式文档