无法设置 ChartJS 画布宽度答案

【问题标题】：can't set ChartJS canvas width无法设置 ChartJS 画布宽度
【发布时间】：2016-07-20 03:32:49
【问题描述】：

我无法让 ChartJS 将自身限制为 200 像素。它占据了浏览器的整个宽度。我错过了什么。

我正在使用以下 CDN

<div id="pnlChart" style="height:200px" >
   <canvas id="myChart" width="400" height="200" class="chart" ></canvas>
</div>

从服务器返回的我的数据似乎格式正确，并且可以正确绘制图表。它没有宽度/高度。（我从 Chrome 的开发工具中提取了这个。

{"type":"line","labels":[0,2,6,7,8,9,10,11,12,13,14,1,3,4,5,15,16 ,17,18,19,20,21,22,23],"datasets":[{"label":"Data","data":[2,1,8,36,119,179,214,165,87,173,220,0,0,0 ,0,0,0,0,0,0,0,0,0,0]}]}

【问题讨论】：

标签： chart.js

【解决方案1】：

您应该能够通过告诉 Chart.js 不要使用响应模式来禁用这种容器宽度填充行为。尝试将其传递到图表的全局配置中（最高级别的选项）：

options: {
    responsive: false
}

请参阅the Chart.js documentation 了解如何将其融入图表的完整定义的示例。

如果由于某种原因这不起作用，那么您可以改为限制 div 元素的宽度，该元素包含绘制图形的 canvas。根据您的示例，您可以将其添加到您的 CSS 中：

div#pnlChart {width: 200px}

即使您可以使用其中一种方法，理想情况下，您现在也不希望为项目指定固定宽度，因为这会使页面更难在无数正在使用的设备屏幕上很好地显示现在。

最好为您的网站开发响应式布局，以适应任何屏幕宽度，从小型智能手机到大型桌面显示器。在线搜索有关“响应式设计”的指南以获取有关此主题的文章。

【讨论】：