我有一个条形图，我有脚本，并通过我的json文件加载值。所有值都通过标签显示，除了我的最大值(60)。我怎么做才能让我的60标签出现在我的图表中?
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CS50C Week11</title>
</head>
<body>
<div style="margin-top: 50px; padding:auto">
<canvas id="myCanvas" width="500" height="500" ></canvas>
</div>
<script src="script.js"></script>
</body>
</html>
data.json
[25, 30, 40, 50, 35, 20, 45, 60, 55, 50]
script.js
try {
// Load data from JSON file
fetch('data.json')
.then(response => response.json())
.then(data => {
// Initialize canvas element
const canvas = document.getElementById('myCanvas');
if (!canvas) {
throw new Error('Canvas element not found');
}
const ctx = canvas.getContext('2d');
// Set chart properties
let chartWidth = 500;
let chartHeight = 500;
const barSpacing = 10;
const barWidth = (chartWidth - (data.length - 1) * barSpacing) / data.length;
const maxValue = Math.max(...data);
const labelFont = '16px Arial';
const valueFont = '12px Arial';
const labelColor = '#333';
const valueColor = '#999';
// Draw bars and labels
data.forEach((value, index) => {
const x = index * (barWidth + barSpacing);
const y = chartHeight - (value / maxValue) * chartHeight;
const height = (value / maxValue) * chartHeight;
// Draw bar
ctx.fillStyle = '#66a';
ctx.fillRect(x, y, barWidth, height);
// Draw label
ctx.font = labelFont;
ctx.fillStyle = labelColor;
ctx.textAlign = 'center';
ctx.fillText(` ${index + 1}`, x + barWidth / 2, chartHeight + 20);
// Draw value
ctx.font = valueFont;
ctx.fillStyle = valueColor;
ctx.textAlign = 'center';
ctx.fillText(value, x + barWidth / 2, y - 10);
});
})
.catch(error => console.log(error.message));
} catch (error) {
console.log(error.message);
}
我已经尝试在JS的Draw Label部分添加这个if条件
ctx.textAlign = 'center';
if (index === data.length - 1) {
// Adjust x-coordinate for last bar label
x += barWidth / 2;
}
所以它只在那个条件下操作x，但这样做会使最右边的条消失(除了我已经消失的60条之外)
在标签栏的顶部留出一些空间。您可以定义一个barMaxHeight = chartHeight-20并使用它来计算图表上每个柱的高度:
const data = [25, 30, 40, 50, 35, 20, 45, 60, 55, 50];
// Initialize canvas element
const canvas = document.getElementById('myCanvas');
if (!canvas) {
throw new Error('Canvas element not found');
}
const ctx = canvas.getContext('2d');
// Set chart properties
let chartWidth = canvas.offsetWidth;
let chartHeight = canvas.offsetHeight;
let barMaxHeight = chartHeight-20;
const barSpacing = 10;
const barWidth = (chartWidth - (data.length - 1) * barSpacing) / data.length;
const maxValue = Math.max(...data);
const labelFont = '16px Arial';
const valueFont = '12px Arial';
const labelColor = '#333';
const valueColor = '#999';
// Draw bars and labels
data.forEach((value, index) => {
const x = index * (barWidth + barSpacing);
const y = chartHeight - (value / maxValue) * barMaxHeight;
const height = (value / maxValue) * barMaxHeight;
// Draw bar
ctx.fillStyle = '#66a';
ctx.fillRect(x, y, barWidth, height);
// Draw label
ctx.font = labelFont;
ctx.fillStyle = labelColor;
ctx.textAlign = 'center';
ctx.fillText(` ${index + 1}`, x + barWidth / 2, chartHeight + 20);
// Draw value
ctx.font = valueFont;
ctx.fillStyle = valueColor;
ctx.textAlign = 'center';
ctx.fillText(value, x + barWidth / 2, y - 10);
});<div style="margin-top: 50px; padding:auto">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid gray" ></canvas>
</div>