如何在Chart.js中让水平网格线显示于柱状图上方？

我用Chart.js生成的柱状图，希望实现Y轴网格线穿过柱状图并留出一定间距的效果以提升可见性，不确定是否属于padding设置，求实现方法。以下是当前生成柱状图的代码：

<!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>

实现方法 #

要实现Y轴网格线穿过柱子并留出间距的效果，主要调整以下两个核心配置：

• 调整网格线层级：在Y轴的grid配置中添加z: 1，让网格线显示在柱子下方（柱子默认层级为2），结合柱子的半透明背景，就能呈现网格线“穿过”柱子的视觉效果。
• 优化柱子间距：修改barPercentage和categoryPercentage的值，缩小柱子宽度并增大柱子间的空隙，让网格线的可见性更突出。

修改后的完整代码 #

<!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)',
                z: 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.6, // 缩小柱子宽度
          categoryPercentage: 0.7, // 增大柱子间空隙
        }
      });
    }

    createGraphData().catch(console.error);
  </script>

</body>

</html>

内容的提问来源于stack exchange，提问作者David Dacruz