gpt4 book ai didi

javascript - 带有 chart.js 的 angularjs 中的响应式图表

转载 作者:太空宇宙 更新时间:2023-11-04 01:42:35 25 4
gpt4 key购买 nike

正如标题所说,我正在尝试制作响应式图表 js。我从这里使用 charts.js 的框架。 http://jtblin.github.io/angular-chart.js/ .我是 Angular 的新手,所以框架的概念对我来说很模糊。

我想让 Canvas 的大小与包含它的 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'
}
]
}
};
});

最佳答案

你可以尝试用

扩展你的 $scope.options
responsive: true,
maintainAspectRatio: false

查看文档 chart.js responsive docs

关于javascript - 带有 chart.js 的 angularjs 中的响应式图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45145587/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com