javascript - 如何用chartJS链接2个轴？

Question

我正在使用react-chart-js 2以散点图形式显示连续数据。我想在图表上添加选项，但其中一些选项无法正常工作或根本无法工作。所以我希望 x 轴不要移动，y 轴根据数据重新调整，但我的问题是 x-轴保持固定，但 y 轴保持移动，如图所示，0 位于 x 轴上方。

安装的react-chart-js 2版本是:5.2.0，chartJS版本是:4.1.2。

问题: 如何链接两个轴？

我尝试过的: 我尝试在 y 轴中插入 min、max，但 x 轴仍位于底部。

我为插件部分插入了以下代码，但它没有在中间显示线轴。

const plugin = {
  id: 'middleAxis',
  beforeDraw(chart) {
    const {ctx, scales} = chart;
    const yAxis = scales.y;
    const xAxis = scales.x;
    const zeroPosition = yAxis.getPixelForValue(0);
    const labelItems = xAxis.getLabelItems();
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.moveTo(xAxis.left, zeroPosition);
    ctx.lineTo(xAxis.right, zeroPosition)
    ctx.stroke();
    for (const item of labelItems) {
      const {font, label, options} = item;
      const {strokeWidth, strokeColor, textAlign, textBaseline, translation} = options;
      const x = translation[0];
      const y = zeroPosition + font.lineHeight;
      ctx.beginPath();
      ctx.font = font.string;
      ctx.textAlign = textAlign;
      ctx.textBaseline = textBaseline;
      ctx.lineWidth = strokeWidth;
      ctx.strokeStyle = strokeColor;
      ctx.fillText(label, x, y);
      ctx.fill();
    }
    ctx.restore();
  }
};

export const options5 = {
  elements: {
    line: {
      tension: 0.3,
    },
  },
  // Modify the axis by adding scales
  scales: {
    // to remove the labels
    x: {
      display: false,
      ticks: {
        display: true,
      },

      // to remove the x-axis grid
      grid: {
        drawBorder: false,
        display: false,
      },
    },
    // to remove the y-axis label
  },
  responsive: true,
  maintainAspectRatio: false,
  plugins: [plugin],
};

我得到了以下结果:

这是旧代码:

我的散点图选项:

export const options5 = {
  elements: {
    line: {
      tension: 0.3,
    }
  },
  // Modify the axis by adding scales
  scales: {
    // to remove the labels
    x: {
      ticks: {
        display: true,
      },

      // to remove the x-axis grid
      grid: {
        drawBorder: false,
        display: false,
      },
    },
    // to remove the y-axis labels
    y: {
      display:true,
      beginAtZero: true,
      ticks: {
        display: true,

      },
      // to remove the y-axis grid
      grid: {
        drawBorder: false,
        display: false,
      },
    },
  },
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    showLine: true,
    legend: false,
  },
};

问候，

Answer 1

我认为 y 比例配置有错误。 beginAtZero 不是刻度的选项，而是刻度本身的选项。

y: {
      display:true,
      beginAtZero: true, // <--- move here
      ticks: {
        display: true,
      },
      // to remove the y-axis grid
      grid: {
        drawBorder: false,
        display: false,
      },
    },

此外，为了确保刻度不会改变，您可以在轴中设置最小/最大选项，并在刻度中设置步长/计数。