无法使图表 js 响应

2022-01-22 00:00:00 javascript 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)

相关文章