chart.js - 无法设置 ChartJS Canvas 宽度

Question

我无法让 ChartJS 将自身限制为 200px。它占据了浏览器的整个宽度。我缺少什么。

我正在使用以下 CDN

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

从服务器返回的我的数据似乎格式良好并且正确绘制了图表。它没有宽度/高度。 (我已从 Chrome 的开发工具中提取了此内容。

{"类型":"行","标签":[0,2,6,7,8,9,10,11,12,13,14,1,3,4,5,15,16 ,17,18,19,20,21,22,23],"数据集":[{"标签":"数据","数据":[2,1,8,36,119,179,214,165,87,173,220,0,0,0 ,0,0,0,0,0,0,0,0,0,0]}]}

Answer 1

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

options: {
    responsive: false
}

参见the Chart.js documentation有关如何将其融入图表的完整定义的示例。

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

div#pnlChart {width: 200px}

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

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