在 angular-chart.js 模块中更改宽度和高度
Changing width and height in angular-chart.js module
我正在使用 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
}
}
];
/************************************************/
});
观点:
<canvas id="bar"
class="chart chart-bar"
chart-data="dataChart"
chart-labels="labels"
chart-click="onClick"
chart-options="options">
</canvas>
有谁知道如何在 angular-chart.js 中定义 width
和 height
吗?
好的,我已经尝试过这个解决方案并且有效。
<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-class 中的样式。
要根据屏幕尺寸定义图表的高度,我使用此代码:
在控制器中
$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>
希望这些代码对您有所帮助。
问题是高度和宽度属性值存储在图表中,并没有像其他属性那样更新。要解决此问题,您必须向创建事件添加侦听器并手动更改图表对象中的高度
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 查找或会引入新数据的过程中发生变化。
您也可以将 <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>
像其他答案一样设置 width
和 height
对我不起作用。
图表使用其父容器来更新 canvas 渲染和显示尺寸。但是,此方法要求容器相对定位并仅专用于图表 canvas。然后可以通过设置容器大小的相对值来实现响应能力
我正在使用 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
}
}
];
/************************************************/
});
观点:
<canvas id="bar"
class="chart chart-bar"
chart-data="dataChart"
chart-labels="labels"
chart-click="onClick"
chart-options="options">
</canvas>
有谁知道如何在 angular-chart.js 中定义 width
和 height
吗?
好的,我已经尝试过这个解决方案并且有效。
<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-class 中的样式。
要根据屏幕尺寸定义图表的高度,我使用此代码:
在控制器中
$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>
希望这些代码对您有所帮助。
问题是高度和宽度属性值存储在图表中,并没有像其他属性那样更新。要解决此问题,您必须向创建事件添加侦听器并手动更改图表对象中的高度
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 查找或会引入新数据的过程中发生变化。
您也可以将 <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>
像其他答案一样设置 width
和 height
对我不起作用。
图表使用其父容器来更新 canvas 渲染和显示尺寸。但是,此方法要求容器相对定位并仅专用于图表 canvas。然后可以通过设置容器大小的相对值来实现响应能力