Javascript 无法使图表 js 响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42340342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't make chart js responsive
提问by Blue Agency
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.
抱歉，如果我错过了解决我的问题的任何内容，我已经阅读并尝试了许多解决方案，但没有任何解决方案适合该问题。
I have several charts (from chart.js) on a single page, but I can't succeed to make them responsive, despite :
我在一个页面上有几个图表（来自 chart.js），但我无法成功使它们具有响应性，尽管：
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.
我能得到的最好的响应式显示是在放大画布宽度和高度时，但在桌面版本上，图表显示了整个屏幕。
Here is a fiddle.net
这是一个fiddle.net
Anybody to help me ? Thank you very much.
有人能帮我吗？非常感谢。
采纳答案by Blue Agency
The answer is :
答案是 ：
1. add a div around the canvas
1.在画布周围添加一个div
for example :
例如 ：
<div class="wrapper">
<canvas width="600" height="250"></canvas>
</div>
2. add height to the div class in the css
2.在css中给div类添加高度
.wrapper {
height: 500px !important;
}
(adjust height as you wish the responsive rendering)
（根据响应式渲染的需要调整高度）
回答by Krishna Vedula
Bootstrap has an example page, which has a chart (using chartjs) that is responsive. So, I would point to that URL, which can be downloaded and we have a responsive chart.
Bootstrap 有一个示例页面，其中有一个响应式图表（使用 chartjs）。所以，我会指向那个可以下载的 URL，我们有一个响应式图表。
回答by Divya Tewari
I know this is an old post, but recently came across it.
我知道这是一个旧帖子，但最近遇到了它。
Please check https://www.chartjs.org/docs/latest/general/responsive.html#important-note
请检查 https://www.chartjs.org/docs/latest/general/responsive.html#important-note
It basically says that,
它基本上说，
Detecting when the canvas size changes can not be done directly from the canvas element. Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size".
Note that in order for the above code to correctly resize the chart height, the maintainAspectRatio option must also be set to false."
无法直接从画布元素检测画布大小何时发生变化。Chart.js 使用其父容器来更新画布渲染和显示大小。但是，此方法要求容器相对定位并仅专用于图表画布。然后可以通过设置容器大小的相对值来实现响应性”。
请注意，为了让上述代码正确调整图表高度，maintainAspectRatio 选项还必须设置为 false。”
For Example,
例如，
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="chart"></canvas>
</div>
回答by Akash Thakkar
As I saw in fiddle, you have given fixed height and width to canvas tag.
正如我在小提琴中看到的，您已经为画布标签提供了固定的高度和宽度。
Try to give both height and width 70% or 80% for canvas tag. This may solve your problem.
尝试将画布标签的高度和宽度设置为 70% 或 80%。这可能会解决您的问题。
100% may be give full large charts bt try to limit them to 70 to 80.
100% 可能会给出完整的大图表，但尝试将它们限制在 70 到 80。
回答by Amit
You can make the container divs responsive using CSS and make svg width: 100%and height:100%
您可以使用 CSS 使容器 div 具有响应性并使 svgwidth: 100%和height:100%
Here is updated fiddle fiddle.net
这是更新的小提琴fiddle.net
回答by Gh111
I had a similar situation and based on chartjs documentationI had to add responsive: truein my optionssection, but it didn't solve my problem! Finally I noticed that parent element of canvasis flexbox! Removing that solved my problem!
我遇到了类似的情况，根据我必须在我的部分中添加的chartjs 文档，但它没有解决我的问题！最后我注意到的父元素是！删除它解决了我的问题！responsive: trueoptionscanvasflexbox
P.S Official documentation says that adding some style or width/height attributes to canvas tag is invalid! Below is snippet from docs
PS 官方文档说在canvas标签中添加一些样式或者宽度/高度属性是无效的！以下是文档的片段
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
以下示例不起作用：
<canvas height="40vh" width="80vw">：无效值，画布不会调整大小（示例）<canvas style="height:40vh; width:80vw">：无效行为，画布已调整大小但变得模糊
Hope my answer can help someone!
希望我的回答能帮到人！
回答by vishalknishad
Instead of giving height and width attribute, set them through style:
而不是给高度和宽度属性，通过样式设置它们：
Instead of
代替
<canvas id="myChart" width="400" height="100"></canvas>
<canvas id="myChart" width="400" height="100"></canvas>
Do this
做这个
<canvas id="myChart" style="height: 20rem"></canvas>
<canvas id="myChart" style="height: 20rem"></canvas>
回答by Hamza KOUADRI
i tried all what the documents said but no chance,so i managed by my self:
我尝试了所有文件所说的但没有机会，所以我自己管理：
<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>
the idea here to change the width or the height or both when the window resized.
这里的想法是在窗口调整大小时更改宽度或高度或两者。
回答by Morteza QorbanAlizade
Because of can't use media queries to set widthand height, I set width and height attribute by detect mobile or desktop, like below
由于不能使用媒体查询来设置width和height，我通过检测移动或桌面来设置宽度和高度属性，如下所示
HTML
HTML
<canvas id="chart" width="{{width}}" height="{{height}}"></canvas>
javascript - angularjs
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';
}
回答by cbll
I've found that with Chart.js, you need a containing div where you manipulate the css(height/width), which will help the responsiveness - but not fully. There are some constraints especially with the width, as the containing div might leave a lot of whitespace on the bottom/sides, since the canvas won't fully adjust to the containing width as a percentage. It isn't perfect, but it works.
我发现使用 Chart.js，您需要一个包含 div 来操作 css(height/width)，这将有助于响应性 - 但不完全。有一些限制，尤其是宽度，因为包含 div 可能会在底部/侧面留下大量空白，因为画布不会以百分比形式完全调整到包含宽度。它并不完美，但它有效。
So, as a solution: Make a containing div for each chart, and place it using CSS styles for this div :)
因此，作为一个解决方案：为每个图表制作一个包含 div，并使用此 div 的 CSS 样式放置它:)
