Javascript 在 angular-chart.js 模块中更改宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32648562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing width and height in angular-chart.js module
提问by yuro
I'm using the angular module angular-chart.js. It is simple to work with and very smart. But I've noticed that I can't change the widthand heightof the charts. Somewhere I've read that I have to define the size of the chart as follows:
我正在使用 angular 模块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
}
}
];
/************************************************/
});
The view:
风景：
<canvas id="bar"
class="chart chart-bar"
chart-data="dataChart"
chart-labels="labels"
chart-click="onClick"
chart-options="options">
</canvas>
Do anyone knows how to define the widthand heightin angular-chart.js ?
有谁知道如何在 angular-chart.js 中定义width和height？
回答by yuro
Ok I have tried this solution and it works.
好的，我已经尝试过这个解决方案并且它有效。
<canvas id="bar"
height="100"
width="100"
class="chart chart-bar"
chart-data="dataChart"
chart-labels="labels"
chart-click="onClick"
chart-options="options">
</canvas>
Or defining the size as like a style in a CSS-class.
或者将大小定义为 CSS 类中的样式。
回答by kiltek
You can also wrap the <canvas>into a <div>, like so:
您还可以将 包装<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>
Setting the widthand heightlike in the other answers did not work for me.
在其他答案中设置width和height喜欢对我不起作用。
回答by Samuel Dauzon
To define height of charts according to the screen size, I use this code :
要根据屏幕尺寸定义图表的高度，我使用以下代码：
In controllers
在控制器中
$scope.height_chart = window.innerHeight*0.7;
In template
在模板中
<canvas height="{{height_chart}}" class="chart chart-line" data="weight.data" labels="weight.labels" series="weight.series"></canvas>
I hope these codes will help.
我希望这些代码会有所帮助。
回答by Matthew Dolman
The problem is that the height and width attribute values are stored in the chart and are not updated in the same way that the other attributes are. To fix this you have to add a listener to the create event and manually change the height in the chart object
问题是高度和宽度属性值存储在图表中，并且不会以与其他属性相同的方式更新。要解决此问题，您必须向 create 事件添加一个侦听器并手动更改图表对象中的高度
HTML:
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:
JS：
$scope.$on('chart-create', function (event, chart) {
chart.chart.height = $scope.chart.height;
});
You would expect $scope.chart.heightto change during an AJAX lookup or something that will bring in new data.
您可能希望$scope.chart.height在 AJAX 查找期间进行更改，或者会带来新数据。
回答by Anton Makarov
Chart uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size
Chart 使用其父容器来更新画布渲染和显示大小。但是，此方法要求容器相对定位并仅专用于图表画布。然后可以通过设置容器大小的相对值来实现响应性
