无法使图表 js 响应

Question

抱歉，如果我遗漏了任何解决问题的方法，我已经阅读并尝试了许多解决方案，但没有任何解决方案适用于该问题。

我在一个页面上有几个图表（来自 chart.js），但我无法成功地使它们响应，尽管 :

responsive: true,

我能得到的最佳响应显示是在放大 canvas 宽度和高度时，但在桌面版本上图表显示整个屏幕。

这是一个fiddle.net

有人帮我吗？非常感谢。

Answer 1

您可以使用 CSS 使容器 div 响应并使 svg width: 100% 和 height:100%

此处更新fiddlefiddle.net

Answer 2

我发现对于 Chart.js，您需要一个包含 div 的地方来操作 css(height/width)，这将有助于提高响应能力 - 但是没有充分。有一些限制，尤其是宽度，因为包含 div 可能会在 bottom/sides 上留下很多空白，因为 canvas 不会完全调整到包含宽度的百分比.它并不完美，但它确实有效。

因此，作为解决方案：为每个图表制作一个包含 div 的图表，并为此 div 使用 CSS 样式放置它 :)

Answer 3

正如我在 fiddle 中看到的那样，您已经为 canvas 标签指定了固定的高度和宽度。

尝试为 canvas 标签指定 70% 或 80% 的高度和宽度。这可能会解决您的问题。

100% 可能会给出完整的大图表 bt 尽量将它们限制在 70 到 80。

Answer 4

答案是：

1.在 canvas

周围添加一个 div

例如：

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

2。在 css

中为 div class 添加高度

.wrapper {
height: 500px !important;
}

（根据响应式渲染的需要调整高度）

Answer 5

Bootstrap 有一个示例页面，其中有一个响应式图表（使用 chartjs）。所以，我要指出 URL，它可以下载，我们有一个响应式图表。

Dasbhoard Example showing Reponsive Chart

Answer 6

我遇到了类似的情况，基于 chartjs documentation 我不得不在我的 options 部分添加 responsive: true，但这并没有解决我的问题！最后我注意到 canvas 的父元素是 flexbox！删除它解决了我的问题！

P.S官方文档说在canvas标签中添加一些样式或者width/height属性是无效的！以下是来自文档的片段

The following examples do not work:

<canvas height="40vh" width="80vw">: invalid values, the canvas doesn't resize (example) <canvas style="height:40vh; width:80vw">: invalid behavior, the canvas is resized but becomes blurry

希望我的回答能帮到大家！

Answer 7

我知道这是一个旧的 post，但最近才发现它。

请检查 https://www.chartjs.org/docs/latest/general/responsive.html#important-note

基本上是这样说的，

无法直接从 canvas 元素检测 canvas 大小更改。 Chart.js 使用其父容器更新 canvas 渲染和显示尺寸。但是，此方法要求容器相对定位并专用于图表 canvas。然后可以通过设置容器大小的相对值来实现响应能力。
请注意，为了使上述代码正确调整图表高度，maintainAspectRatio 选项也必须设置为 false。"

例如，

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

Answer 8

由于无法使用媒体查询设置width和height，我通过检测移动设备或桌面来设置宽度和高度属性，如下所示

HTML

<canvas id="chart" width="{{width}}" height="{{height}}"></canvas>

javascript - angularjs

$scope.width = '';
$scope.height = '120';
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
   $scope.width = '100';
   $scope.height = '100';
}

Answer 9

不提供高度和宽度属性，而是通过样式设置它们：

<canvas id="myChart" style="height: 20rem"></canvas>

Answer 10

我尝试了所有文件上说的但没有机会，所以我自己管理：

<section style="padding: 0px">    
 <div class="chart-container" style="position: relative; margin: auto; height:167px; width: 1492px;">
         <canvas id="Graph"></canvas>
     </div>
 </section>
    <script>
    $(window).load(function() {
      $( window ).resize(function() {
         $('#Graph').closest('.chart-container').css('width',$('#Graph').closest('section').width());
      });
    });
    </script>

这里的想法是在 window 调整大小时更改宽度或高度或两者。

Answer 11

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

Answer 12

from chart.js

Responsiveness can then be achieved by setting relative values for the container size:
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>
The chart can also be programmatically resized by modifying the container size: chart.canvas.parentNode.style.height = '128px';

无法使图表 js 响应

Can't make chart js responsive

javascript

chart.js

responsive