chart.js基本知识——调整图表尺寸

《chart.js使用学习》最后提到测试过程中发现调用chart.js绘制的图表会自动充满父容器。如果canvas直接放在body标签下，则图标会充满整个页面，即便设置canvas的尺寸也没有用。
参考文献1中介绍：

当根据窗口大小更改图表大小时，主要的限制是画布渲染大小（canvas.width和.height）不能用相对值表示，与显示大小相反（canvas.style.width和.height）。此外，这些尺寸彼此独立，因此画布渲染尺寸不会根据显示尺寸自动调整，从而使渲染不准确。
以下示例不起作用：
<canvas height=“40vh” width=“80vw”>: 无效值，画布不调整大小 (示例)
<canvas style=“height:40vh; width:80vw”>: 无效的行为，画布调整大小但变得模糊(example)

为了调整图表大小，可以采用以下几种方式：

外嵌div标签

将canvas置于div标签内，然后通过调整div元素的尺寸来控制图表的大小，示意程序及截图如下所示：

 <div style="height:30%;width:30%;"><canvas id="myChart" ></canvas></div>

chart.js文档中建议使用单独的容器放置绘图用的canvas，然后通过设置容器的大小来调整图表大小。

配置responsive属性

chart.js的全局配置中，在option命名空间下包含几个与尺寸相关的参数配置：

responsive：布尔值，默认值为true，用于设置图表所在canvas是否随其容器大小变化而变化；
maintainAspectRatio：布尔值，默认值为true，用于设置图表调整大小时是否保持最初的canvas宽高比；
aspectRatio：数值型，默认值为2，用于设置canvas的宽高比（值为1表示canvas是正方形），如果显示定义了canvas的高度，则此属性无效；
onResize：函数型，默认为null，图表尺寸变化时调用本函数，传入图表对象实例及新的尺寸；
resizeDelay：数值型，默认为0，表示毫秒数，用于设置图表尺寸延迟变化时间。

在chart类的构造函数的option中设置responsive为false，然后就可以指定canvas尺寸了。

  var barChart = new Chart(ctx, {type: 'line',data: data,options: {responsive:false}    });

通过编程方式设置图表尺寸

chart.js还支持通过编程方式设置图表尺寸，示例代码如下（代码来自参考文献2）：

chart.canvas.parentNode.style.height = '128px';
chart.canvas.parentNode.style.width = '128px';

[1]https://chartjs.bootcss.com/docs/
[2]https://www.chartjs.org/docs/latest/charts/line.html#line-styling

chart.js基本知识——调整图表尺寸相关推荐

使用 Vue.js 和 Chart.js 制作绚丽多彩的图表
本文作者:Jakub Juszczak 编译:胡子大哈翻译原文:http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35 ...
统计图表插件Chart.js（前端常用图表）
官方文档:https://chartjs.bootcss.com/docs/ 图表JS: <script src="Chart.js"></script> ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
使用Chart.js创建图表
图表是为应用程序增加最大价值的元素或功能.具有以图形形式显示数据的功能,对于用户读取数据集的百分比非常有帮助. 使用图表有许多优点.包括能够使我们制作的应用看起来更专业.因为原本只是数字的数据看起来更 ...
chart.js 图表刷新_Chart.js的花式，响应式图表
chart.js 图表刷新 Data is all around us. While search engines and other applications work most optimally ...
JS图表工具FusionCharts调整图表百分比大小
2019独角兽企业重金招聘Python工程师标准>>> 在使用FusionCharts的时候,用户可以为图表的宽度和高度设置百分比值,用来替代绝对的像素值.图表将根据父容器元素自动调 ...
图表Chart.js入门教程
使用Chart.js来制作各种各样的图表.下面将为你全方位介绍chart.js.chart.js最与众不同之处是,它可以在HTML5 Canvas上面绘制出色的响应式图表. Chart.js允许你把不 ...
图表Chart js入门教程
使用Chart.js来制作各种各样的图表.下面将为你全方位介绍chart.js.chart.js最与众不同之处是,它可以在HTML5 Canvas上面绘制出色的响应式图表. Chart.js允许你把不 ...
JS组件系列——开源免费图表组件：Chart.js
前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...

chart.js基本知识——调整图表尺寸

外嵌div标签

配置responsive属性

通过编程方式设置图表尺寸

chart.js基本知识——调整图表尺寸相关推荐

最新文章

热门文章