无法使图表 js 响应 [英] Can't make chart js responsive

问题描述

很抱歉，如果我错过了解决问题的任何方法，我已经阅读并尝试了许多解决方案，但没有一个适合该问题.

sorry if I missed anything to fix my issue, I've read and tried many solutions without any of them being adapted to the problem.

我在一个页面上有多个图表(来自 chart.js)，但我无法成功地让它们响应，尽管:

I have several charts (from chart.js) on a single page, but I can't succeed to make them responsive, despite :

responsive: true,

我能得到的最好的响应式显示是在扩大画布宽度和高度时，但在桌面版本中，图表会显示整个屏幕.

The best responsive display I could get was when enlarging canvas width and height, but on the desktop version charts were displayed the entire screen.

这是一个 fiddle.net

有人帮我吗?非常感谢.

Anybody to help me ? Thank you very much.

推荐答案

答案是:

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

例如:

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

<强>2.为css中的div类添加高度

.wrapper {
height: 500px !important;
}

(根据需要调整响应式渲染的高度)

(adjust height as you wish the responsive rendering)

这篇关于无法使图表 js 响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！