6

我正在使用角度模块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>

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

4

5 回答 5

15

好的，我已经尝试过这个解决方案并且它有效。

        <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 类中的样式。

于 2015-09-18T09:41:27.550 回答
7

您也可以将 包装<canvas>成<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>

在其他答案中设置widthand heightlike 对我不起作用。

于 2016-11-17T08:38:03.150 回答
4

要根据屏幕大小定义图表的高度，我使用以下代码：

在控制器中

$scope.height_chart = window.innerHeight*0.7;

在模板中

<canvas height="{{height_chart}}" class="chart chart-line" data="weight.data" labels="weight.labels" series="weight.series"></canvas>

我希望这些代码会有所帮助。

于 2016-03-16T23:27:51.703 回答
1

问题是高度和宽度属性值存储在图表中，并且不会以与其他属性相同的方式更新。要解决此问题，您必须向 create 事件添加一个侦听器并手动更改图表对象中的高度

HTML：

<canvas
    id="chart"
    class="chart chart-horizontal-bar"
    chart-data="chart.data"
    chart-labels="chart.data.labels"
    chart-series="chart.series"
    chart-options="chart.options"
    chart-colors="chart.colors"
    height="{{ compareChart.height }}"
    width="{{ compareChart.width }}"
></canvas>

JS：

$scope.$on('chart-create', function (event, chart) {
    chart.chart.height = $scope.chart.height;
});

您会期望$scope.chart.height在 AJAX 查找期间发生更改，或者会带来新数据。

于 2016-10-26T03:22:45.173 回答
0

Chart 使用其父容器来更新画布渲染和显示大小。但是，此方法要求容器相对定位并仅专用于图表画布。然后可以通过设置容器大小的相对值来实现响应性

于 2020-01-15T07:53:06.673 回答