如何將 2 個軸與 chartJS 鏈接？

Question

我正在使用react-chart.js 2以散點圖形式顯示連續數據。 我想在圖表上放置選項，但其中一些無法正常工作或根本無法工作。所以我希望 x 軸不要移動，y 軸根據數據重新調整，除了我的問題是 x-軸保持固定，但 y 軸保持移動，如圖所示，0 在 x 軸上方。

安裝的react-chart.js 2版本為：5.2.0，chartJS版本為：4.1.2。

問題：如何鏈接 2 個軸？

我嘗試了什么：我試圖在 y 軸中插入最小值、最大值，但 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,
      },
    },

此外，為了確保刻度不會改變，您可以在軸中設置最小/最大選項，並在刻度中設置 stepSize/count。

Answer 2

在這里你可以看到一個插件（原型）在相同的 position 0 Y 值處繪制“X 軸”。

一些注意事項：

1. 在圖表右側添加填充以繪制最后一個 label
2. 必須定義 X 軸但隱藏刻度（您可以維護網格）
3. 使用 Chart.js 4.2.0

樣本：

 const ctx = document.getElementById('myChart').getContext('2d'); const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May']; 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(); } }; const myChart = new Chart(ctx, { type: 'line', plugins: [plugin], data: { labels, datasets: [{ label: 'ds1', data: [1, -2, 3, -4, 5] }] }, options: { layout: { padding: { right: 20 } }, scales: { x: { display: true, grid: { drawTicks: false }, ticks: { display: false } } } } });

 .myChartDiv { max-width: 600px; max-height: 400px; }

 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script> <html> <body> <div class="myChartDiv"> <canvas id="myChart" width="600" height="400"/> </div> </body> </html>