在 chart.js 中创建对角线阴影区域

Question

我想在图表上有一个阴影对角线区域。不幸的是，fill 属性只填充了两条线之间的垂直区域，并没有向外延伸到图表的边缘，结果是：

作为解决方法，我可以使用带有大 borderWidth 的单行，它可以正确填充整个区域：

但是，borderWidth是以像素为单位指定的，这意味着它相对于图表数据的宽度将根据显示分辨率而变化。

如何创建一个覆盖整个对角线的阴影区域，并且其宽度是根据图表轴指定的，而不是像素？

Answer 1

如果您确保您的最后一个点落在图表区域之外，那么这条线将继续前进，它将正确填充：

const options = {
  type: 'line',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [{
        x: 0,
        y: 20
      }, {
        x: 30,
        y: 0
      }],
    }, {
      label: '# of Points',
      fill: '-1',
      data: [{
        x: 0,
        y: 15
      }, {
        x: 25,
        y: 0
      }],
    }]
  },
  options: {
    scales: {
      x: {
        type: 'linear',
        min: 10,
        max: 20
      },
      y: {
        min: 0,
        max: 20
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

在 chart.js 中创建对角线阴影区域

Creating a diagonal shaded area in chart.js

chart.js