无法设置 ChartJS 画布宽度

Question

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

我正在使用以下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,22,23]，"datasets"：[｛"label"："Data"，"Data"：[2,18,36119179214165,87173220,0,0,0,0,0.0,0,0,00,0,0,00,0]}｝

Answer 1

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

options: {
    responsive: false
}

请参阅Chart.js文档，了解如何将其融入图表的完整定义中。

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

div#pnlChart {width: 200px}

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

为您的网站开发一个响应式布局要好得多，它可以根据任何屏幕宽度进行调整，从小型智能手机到大型桌面显示器。在线搜索有关"响应式设计"的指南，以获取有关该主题的文章。