React-ChartJS-2 中散點的自定義 label 標題

Question

我嘗試使用 React-ChartJS-2 散點圖 plot。 基本設置只給出了plot中點的x值和y值。有沒有辦法顯示plot中點的label？

我環顧四周，發現代碼似乎可以工作，但事實並非如此。

const optionsScatterPlot = {
  plugins: {
    tooltip: {
      callbacks: {
        title: function (tooltipItem:any, data:any) {
          const dataLabel = dataScatterPlot.labels[tooltipItem.index];
          return dataLabel;
        }
      }
    },
  },
};
const Scatter = () => {
  return (
    <div>
      <Box maxWidth="lg" margin="auto" >
        AdEfficiency
      </Box>
      <Scatter options={optionsScatterPlot} data={dataScatterPlot} />
    </div>
  )
}

Answer 1

將 label 標題添加到任一軸，如下所示：

const options = {
  scales: {
    y: {
      beginAtZero: true,
      title: {
        display: true,
        text: 'label for Y'
      }
    },
    x: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'label for X'
        }
      },
  },
};

text屬性是要在坐標區上顯示的文本 label。 'options' 變量是您傳遞給 options 道具的內容。