無法讓圖表js響應

對不起，如果我錯過了任何解決我的問題，我已閱讀並嘗試了許多解決方案，而沒有任何解決方案適應該問題。無法讓圖表js響應

我有一個單頁上幾個圖表（從chart.js之），但我不能成功，使它們反應靈敏，儘管：

responsive: true,

最好的迴應顯示，我能得到放大畫布時，是寬度和高度，但在桌面版本圖表上顯示整個屏幕。

這裏是一個fiddle.net

有人幫助我嗎？非常感謝你。

答案是：

1.添加在畫布周圍

例如一個div ：

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

2.添加高度到div類的CSS

.wrapper { 
height: 500px !important; 
}

（調整高度希望的響應渲染）

2017-03-15 17:30:49

可以使用CSS使容器div的響應，使SVG width: 100%和height:100%

這裏更新小提琴fiddle.net

2017-02-20 09:12:17 Amit

它在頁面左側創建1列文字和圖表。 –

我發現與chart.js之，你需要一個操縱包含分區CSS（高度/寬度），這將有助於響應 - 但不完全。特別是在寬度方面有一些限制，因爲包含div可能會在底部/側面留下大量空白，因爲畫布不能完全適應包含寬度的百分比。這不是完美的，但它的工作原理。

所以，作爲一個解決辦法：對於每個圖表包含分區，並使用CSS樣式這個div :)

2017-02-20 09:16:27 cbll

我的圖表在我的頁面上以2個組的形式顯示。每個組都包裝在一個div容器中，因爲我使用Bootstrap，然後每個圖表都在div「class = row」中。我嘗試應用於這些不同的div寬度和高度的百分比，甚至最大寬度和最大高度，但沒有任何工作。 –

你可以爲寬度/高度= 100％的兩行創建一個包含div，然後將其分爲兩個包含div的組件 - 每個組件一個？ – cbll

你的意思是'

'??沒有更好的顯示... –

正如我在小提琴看到，你給固定的高度和寬度canvas標籤放置它。

試圖給高度和寬度70％或80％的畫布標籤。這可能會解決您的問題。

100％可能是充分大圖BT嘗試將其限制在70〜80

2017-02-20 09:20:43

我嘗試過百分比寬度/高度，但問題是一樣的。 –

嘗試限制固定高度和寬度以及畫布百分比中的對應div。這可能有幫助。 @BlueAgency –

沒有改進... –

引導具有例如頁面，其中有一個圖表（使用chartjs），其響應。所以，我會指向那個可以下載的URL，並且我們有一個響應式圖表。

2018-02-28 13:55:51

回答