<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 字段中进行什么更改，我总是会得到一个非常大的图表，完全覆盖整个屏幕。
帮忙吗？
最佳答案
如果您将 Canvas 放在容器中并使用 CSS 设置其宽度，它将调整图形的大小。
https://jsfiddle.net/ug5eczp2/1/
HTML:
<section>
<canvas id="updating-chart" width="200" height="200"></canvas>
</section>
CSS:
section {
width: 50%;
}
关于javascript - 无法更改 chart.js 大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43601057/