在 chartjs 中，点在顶部和底部的边缘被减半

Question

如图所示，点在到达底部或顶部边缘时被切成两半（本例中数据为 1 或 5 时）。

我尝试填充，添加一些 'fake' 数据以扩展 1 和 5 的限制，并使用滴答上的回调函数将其删除。 None 按预期工作

这是我对此图表的配置。

const config = {
    type: 'line' as ChartType,
    data: data,
    options: {
      pointStyle: 'circle',
      //pointBackgroundColor: 'white',
      scales: {
        y: {
          ticks: {
            maxTicksLimit: 5,
            stepSize: 1,
          },
          min: 1,
          max: 5,
          reverse: true,
        },
      },
    },
  };

删除最小值和最大值，得到预期的输出。

但我需要最小值和最大值，因为我想要固定的 Y 轴值

任何解决此问题的线索？

Answer 1

您可以使用 afterDataLimits 挂钩来设置刻度的最大值和最小值，这样它仍然会溢出图表区域：

const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      data: [12, 19, 3, 10, 2, 3],
      borderColor: 'pink',
      backgroundColor: 'pink',
      radius: 10
    }]
  },
  options: {
    scales: {
      y: {
        afterDataLimits: (scale) => {
          scale.max = 10;
          scale.min = 0;
        }
      },
    },
  },
});

<canvas id="chart" width="250" height="120" />
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>

在 chartjs 中，点在顶部和底部的边缘被减半

Points cut at half at the edges of top and bottom, at chartjs

javascript

configuration

typescript

chart.js

angular