无法使图表js响应

Question

对不起,如果我错过任何解决问题的方法,我已经阅读并尝试了许多解决方案,而没有任何解决方案.

我在一个页面上有几个图表(来自chart.js),但我不能成功地使它们响应,尽管:

responsive: true,

我可以获得的最佳响应显示是在放大画布宽度和高度时,但在桌面版本图表上显示整个屏幕.

有人帮我吗？非常感谢你.

Answer 1

maintainAspectRatio: false给我解决了类似的问题。默认值为true。

Answer 2

答案是 :

1.在画布周围添加一个div

例如 :

<div class="wrapper">
    <canvas width="600" height="250"></canvas>
</div>

2.在CSS中为div类添加高度

.wrapper {
height: 500px !important;
}

(根据您的需要调整高度,以响应渲染)

Answer 3

我知道这是一个旧帖子，但最近遇到了它。

它基本上说，

无法直接从画布元素检测画布大小何时发生变化。Chart.js 使用其父容器来更新画布渲染和显示大小。但是，此方法要求容器相对定位并仅专用于图表画布。然后可以通过设置容器大小的相对值来实现响应性”。
请注意，为了让上述代码正确调整图表高度，maintainAspectRatio 选项还必须设置为 false。”

例如，

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

Answer 4

您可以使用 CSS 使容器 div 响应并制作 svgwidth: 100%和height:100%

这里是更新的小提琴fiddle.net

Answer 5

Bootstrap有一个示例页面，该页面具有一个响应式图表（使用chartjs）。因此，我指向该URL，可以下载该URL，并且我们有一个响应图。

Answer 6

我遇到了类似的情况，根据Chartjs 文档，我必须responsive: true在我的options部分中添加，但这并没有解决我的问题！最后我注意到的父元素canvas是flexbox！删除它解决了我的问题！

PS官方文档说在canvas标签中添加一些样式或者宽高属性是无效的！以下是文档片段

以下示例不起作用：

<canvas height="40vh" width="80vw">：无效值，画布不调整大小（示例）<canvas style="height:40vh; width:80vw">：无效行为，画布调整大小但变得模糊

希望我的回答可以帮助别人！

Answer 7

正如我在小提琴中看到的，您已经为画布标签提供了固定的高度和宽度。

尝试将画布标签的高度和宽度设置为 70% 或 80%。这可能会解决您的问题。

100% 可能会给出完整的大图表，但尝试将它们限制在 70 到 80。