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的{{1}}元素的宽度。根据您的示例，您可以将其添加到CSS：

canvas

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

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

无法设置ChartJS画布宽度

1 个答案: