Js 图形不能缩放到画布大小

我正在尝试用 Charts.js 创建一个图形(当前的图形只是一个非常简单的例子，我正试图从 Chart.js 文档中获取一些信息) ，而且这个图形并没有按照我给出的画布大小进行缩放。这是所有相关代码。

进口:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>

然后，我将它连接到一个 javascript 文件，如下所示:

<script type="text/javascript" src="js/stats_tab.js"></script>

我已经准备好画布了:

        <div id="graph_2015" class ="stats_box">
<h4>Graph 2015</h4>
Text
<canvas id="myChart" width="200" height="200"></canvas>
</div>

最后，在 stats _ tab. js 中，我有以下代码:

window.onload=function(){
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1,2,3,4,5,6,7,8,9,10],
datasets: [
{
label: "My First dataset",
data: [1,2,3,2,1,2,3,4,5,4]
}
]
},
options: {
}
});
}

该图表显示良好，但它拒绝缩放到我给它的画布大小。也没有任何涉及到的 div 相关的 css。在 chrome 上的检查功能让我知道最终的图表是676乘676，而不是我指定的200乘200。不知道发生了什么。

谢谢！

113984 次浏览
小开

这个 应该可以。基本上，只需要在你的 javascript 中添加宽度和高度属性:

var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 200;
ctx.canvas.height = 200;
var myChart = new Chart(ctx,.........

参考资料: 调整画布大小

小开

只有当 Chartjs 的响应模式为 false (默认为 true)时，为画布设置的 width 和 height 属性才能工作。更改 stats _ tab。Js 到这个，它将工作。

    window.onload=function(){
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1,2,3,4,5,6,7,8,9,10],
datasets: [
{
label: "My First dataset",
data: [1,2,3,2,1,2,3,4,5,4]
}
]
},
options: {
responsive: false
}
});
}
小开

重要的一点是: width和 height的属性不是以 px 为单位的大小，而是比值。

<canvas id="myChart" width="400" height="400"></canvas>

在这个例子中，它是1:1的比例。因此，如果您的 html 内容是676像素的宽度，那么您的图表将是676 * 675像素
这可以解释一些常见的错误。

可以通过将 maintainAspectRatio设置为 false 来禁用此特性。

小开

下面的方法对我很有效，我能够保持图表的响应性！

  var ctxx = document.getElementById("myChart");
ctxx.height = 80;
小开

在您的选项中，将 maintainAspectRatio设置为 false，将 responsive设置为 true。这将首先尝试缩放您的图表以匹配您的画布尺寸。如果画布不适合屏幕，例如在手机上，你的图表将被重新缩放以适应页面。

window.onload=function(){
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1,2,3,4,5,6,7,8,9,10],
datasets: [
{
label: "My First dataset",
data: [1,2,3,2,1,2,3,4,5,4]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
}
});
}
小开

真正的问题是画布将响应其父级而重新缩放。我想保持反应灵敏。因此，这样的事情将解决这个问题:

<div style="width:50%">
<canvas id="myChart"></canvas>
</div>
小开

如果您的 <canvas>元素没有 width和 height“ 属性”(不是 css 属性 )。尝试将它们设置为1(因为这只是一个比例)

<canvas id="activeUsersPieChart" width="1" height="1"></canvas>
小开

虽然有点晚了，但我还是很努力地解决这个问题，尤其是在一个有多个图表的页面上。

这个小花絮解决了这一切-我的图表现在都很适合，并调整大小与他们正在。

添加到您的页面样式(8px 是个人喜好，如果需要可以更改) :

<style type="text/css">
#canvas-holder {
background-color: #FFFFFF;
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
}
</style>

对于适当的分区:

<div id="canvas-holder">
<canvas id="chart-area"></canvas>
</div>
小开

我遇到了同样的问题，我的图表不能正确调整大小。为了避开这个问题，我做了两件事。

  1. 将画布标记样式设置为宽度和高度为100% 。这将确保它始终适合100% 的容器宽度和高度。
  2. 对于选项值集 response: true & maintainAspectratio: false。这将确保图形响应大小的更新，而忽略纵横比。

下面是我使用的代码:


css
#myGraph {
width: 100%;
height: 100%;
}


html
<canvas id="myGraph" />

当你用 ctx 初始化图表时，设置如下选项:

     options: {
responsive: true,
maintainAspectRatio: false
}

现在，当你调整屏幕大小时，图形应该相应地调整大小。 注意: 现在图形将填充其容器的大小，因此无论您将画布放入其中，都将填充该容器的大小。

小开

下面是 Chart.js 文档的代码。 “ https://www.chartjs.org/docs/latest/general/responsive.html”

var ctx = document.getElementById('myChart').getContext('2d');
ctx.canvas.parentNode.style.width = "500px";
ctx.canvas.parentNode.style.height = "500px";
var myChart = new Chart(ctx, .....
小开

  1. 创建一个 div 元素并将图表画布放入其中，将其命名为画布持有者:

     <div id="canvas-holder">
<canvas id="myChart"></canvas>
</div>

  2. 使用 CSS，指定画布支架的高度和宽度

     #canvas-holder {
background-color: #FFFFFF;
position: absolute;
width: 400px;
height: 400px;
}
小开

我不能不刷新就缩小图表。根据 chart.js 文档，需要一个具有相对定位和 vh/vw 指定高度的容器。

我的图表之前是在一个弹性容器中，我认为这导致了很多我的缩放问题

无法直接从 Js 使用其父容器更新 画布渲染和显示大小。但是，此方法需要 容器的相对位置和专用于图表 只有画布。响应性可以通过设置相对 容器大小的值

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

Https://www.chartjs.org/docs/latest/configuration/responsive.html


提交答案