Chart.js: 仅在数据集点上的网格线

Question

我创建了一个简单的图表：

const myChart = new Chart(document.getElementById('myChartChart').getContext('2d');, {
  type: 'scatter',
  data: {
    datasets: [{
        label: 'Dataset',
          data: [{
            x: -40,
            y: 34,
          }, {
            x: -10,
            y: 45,
          }, {
            x: 140,
            y: 45,
          }],
        fill: true,
        stepped: true,
    }]
  },
  options: {
    responsive: true,
    scales: {
      x: {
        suggestedMin: -50,
        suggestedMax: 150,
        ticks: {
          callback: function(value, index, values) {
            return value + ' °C';
          }
        },
      },
      y: {
        suggestedMin: 32,
        suggestedMax: 46,
        ticks: {
          callback: function(value, index, values) {
            return value + ' bar';
          }
        },
      }
    },
    plugins: {
      legend: {
        display: false
      }
    }
  }
});

Fiddle: https://jsfiddle.net/o6b97xL2

但我不喜欢静态的周期性网格线和标签，但只在我的三个数据点上。通过回调，我只能从网格中获取定义的步骤。我怎样才能实现这样的目标：

Image Link (You need at least 10 reputation to post images)

Answer 1

您可以在两个轴上定义 afterBuildTicks callbacks。在那里，您用从 data.

中提取的您自己的刻度替换轴刻度

请查看您修改后的代码，看看它是如何工作的。

const data = [
  { x: -40, y: 34 }, 
  { x: -10, y: 45 },
  { x: 140, y: 45 }
];
myChart = new Chart('myChartChart', {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'Dataset',
      data: data,
      fill: true,
      stepped: true,
    }]
  },
  options: {
    responsive: true,
    scales: {
      x: {
        suggestedMin: -50,
        suggestedMax: 150,
        afterBuildTicks: axis => axis.ticks = data.map(v => ({ value: v.x })),
        ticks: {
          callback: v => v + ' °C'
        }
      },
      y: {
        suggestedMin: 32,
        suggestedMax: 46,
        afterBuildTicks: axis => axis.ticks = data.map(v => ({ value: v.y })),
        ticks: {
          callback: v => v + ' bar'
        }
      }
    },
    plugins: {
      legend: {
        display: false
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<canvas id="myChartChart"></canvas>

Chart.js: 仅在数据集点上的网格线

Chart.js: grid lines only on dataset points

grid

chart.js