在angular-chart.js模块中更改宽度和高度

Question

我正在使用角度模块angular-chart.js.它很简单,非常聪明.但我注意到我无法改变图表width和height图表.在某处我读过,我必须按如下方式定义图表的大小:

var vm = $scope;
vm.labels = [];
vm.data = [];

CrudService.getData(selDate).$promise.then(
     function (response) {
       angular.forEach(response, function (val) {
          val.datum = $filter('date')(val.datum, 'dd.MM.yyyy');
          vm.labels.push(val.datum);
          vm.data.push(val.grade);
       });

       vm.dataChart = [vm.data];

       /* This is the important part to define the size */
       vm.options = [
         {
            size: {
               height: 200,
               width: 400
            }
         }
       ];
       /************************************************/
    });

风景:

<canvas id="bar" 
        class="chart chart-bar" 
        chart-data="dataChart"
        chart-labels="labels"
        chart-click="onClick"
        chart-options="options">
</canvas>

有谁知道如何定义width和height在angular-chart.js？

Answer 1

好的我已经尝试过这个解决方案而且有效.

        <canvas id="bar"
                height="100"
                width="100"
                class="chart chart-bar" 
                chart-data="dataChart"
                chart-labels="labels"
                chart-click="onClick"
                chart-options="options">
        </canvas>

或者将大小定义为CSS类中的样式.

Answer 2

您也可以将其包装<canvas>成a <div>,如下所示:

<div style="height:300px;width:300px;">
    <canvas
            class="chart chart-radar"
            chart-data="$ctrl.data"
            chart-options="options"
            chart-labels="$ctrl.labels"></canvas>
</div>

在其他答案中设置width等等height对我来说不起作用.