Question

<html>
<head>
  <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/css/graph2.css">
  <title>Graph</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

</head>
<body>
    <canvas id="updating-chart" width="200" height="200"></canvas>
</body>
</html>

这是我正在使用的html，我正在使用Chart.js 2.1.4，但无论我做什么，我都无法缩小尺寸。

使用Javascript：

<script type="text/javascript">
var canvas = document.getElementById('updating-chart'),
    ctx = canvas.getContext('2d'),
    startingData = {
      labels: ["A", "B", "C", "D"],
      datasets: [
          {
             label: "Product A",
             fillColor: "rgba(220,220,220,0.5)",
             strokeColor: "rgba(220,220,220,0.8)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              data: [65, 59, 80, 81]
          }
      ]
    };

var myLiveChart = new Chart(ctx,{
  type: 'bar',
  data: startingData,
  responsive: true,
  maintainAspectRatio: true
});
</script>

我该如何解决这个问题？无论我在canvas HTML字段中更改了什么，我总是得到一个非常大的图表，完全覆盖整个屏幕。

帮助？

Answer 1

如果您将画布放在容器中并使用CSS设置宽度，则会调整图形大小。

https://jsfiddle.net/ug5eczp2/1/

HTML：

<section>
    <canvas id="updating-chart" width="200" height="200"></canvas>
</section>

CSS：

section {
  width: 50%;
}

Answer 2

画布将适合剖面容器。代码如下。只需将部分的宽度更改为您想要的值。

<section>
    <canvas id="updating-chart" ></canvas>
</section>

section {
 width: 100%;
}
section > canvas {
 top: 0;
bottom: 0;
right: 0;
left: 0;
}

Answer 3

您可以尝试删除宽度值，仅指定高度值

<canvas id="updating-chart" height="200"></canvas>

无法更改chart.js大小

3 个答案: