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