我有一个Chart.js输出看起来像第一个图像，我希望它看起来像第二个图像，其中y轴线将"交叉"条形图并将其隔开一点以获得更好的可见性，我不认为我们可以称为这种填充，或者我如何使用Chart.js创建这种效果？
这是我的代码，它创建了像第一个图像一样的条形图，谢谢前面.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$DOGI Listings Graph</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
html,
body {
height: 100%;
margin: 0;
background-color: black;
color: white;
}
canvas {
width: 100% !important;
height: 100% !important;
}
</style>
</head>
<body style="background-color: black;color: white;">
<canvas id="myChart"></canvas>
<script>
const chartData = [{
x: 1,
y: 34504
}, {
x: 2,
y: 47831
},
{
x: 3,
y: 7050
}, {
x: 4,
y: 8009
},
{
x: 5,
y: 8400
}, {
x: 6,
y: 1250
},
{
x: 7,
y: 2505
}, {
x: 8,
y: 2001
},
{
x: 9,
y: 88
}, {
x: 10,
y: 650
},
{
x: 11,
y: 1350
}, {
x: 12,
y: 200
},
{
x: 13,
y: 12782
}, {
x: 14,
y: 1000
},
{
x: 15,
y: 50
}, {
x: 16,
y: 500
},
{
x: 17,
y: 204
}, {
x: 18,
y: 15
},
{
x: 19,
y: 250
}, {
x: 20,
y: 1200
},
{
x: 21,
y: 200
}, {
x: 22,
y: 200
},
{
x: 23,
y: 100
}, {
x: 24,
y: 200
},
{
x: 25,
y: 450
}
]
async function createGraphData() {
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: '# of Tokens',
data: chartData,
backgroundColor: 'rgb(255,165,3,0.8)',
}]
},
options: {
legend: {
display: false
},
scales: {
x: {
type: 'linear',
position: 'bottom',
min: 0,
max: 25,
ticks: {
stepSize: 1,
color: 'white',
autoSkip: false,
},
title: {
display: true,
text: 'Price $ (USD)',
color: 'white'
}
},
y: {
beginAtZero: true,
grid: {
color: 'rgba(255,255,255,0.1)'
},
title: {
display: true,
text: 'Number of Tokens',
color: 'white'
},
ticks: {
color: 'white'
}
}
},
plugins: {
legend: {
display: false,
labels: {
color: 'white'
}
},
title: {
display: true,
text: 'Chart Title',
color: 'white',
font: {
size: 24
}
}
},
maintainAspectRatio: false,
responsive: true,
barPercentage: 0.7,
categoryPercentage: 0.8,
}
});
}
createGraphData().catch(console.error);
</script>
</body>
</html>