如何使用 Chart.js 将水平网格线放置在条形上方？

Question

我有一个 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>

Answer 1

只需将 z 属性添加到选项中比例的网格并将其设置为 1，而默认值为 -1 对于间距，您可以使用破折号属性添加边框选项并在数组中设置间距 这是一个示例，其中包含一些可能的值适合您的情况和颜色，您可以将它们添加到比例对象内的“y”对象中：

grid: {
    color: 'rgba(255,255,255,0.35)',
    z:1,
},
border:{
       dash:[3,3]
},

另请检查文档以了解更多 ChartJs 样式

grid: {
    color: 'rgba(255,255,255,0.35)',
    z:1,
},
border:{
       dash:[3,3]
},