有没有办法只在图表上更改 react-chart-js 工具提示？

Question

我有以下内容：

     const labels = historicosData.map(historico => {
    const localDate = new Date(historico.fechaIngreso);
    return localDate.toLocaleString('es-ES', { month: 'long' })
  });
  //const labels = historicosData.map(({ anio }) => anio);
  // const labels = [123, 321, 456, 123, 4568]
  const data = {
    labels,
    datasets: [
      {
        label: 'Valores históricos',
        fill: false,
        backgroundColor: 'rgba(75,192,192,0.4)',
        borderColor: 'rgba(75,192,192,1)',
        pointBorderColor: 'rgba(75,192,192,1)',
        pointBackgroundColor: '#fff',
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: 'rgba(75,192,192,1)',
        pointHoverBorderColor: 'rgba(220,220,220,1)',
        pointHoverBorderWidth: 10,
        pointRadius: 10,
        pointHitRadius: 10,
        data: historicosData.map(({ valor }) => valor),
      },
    ],
  };

并显示如下图表：

有没有一种方法可以更改工具提示的默认消息（上面写着 'mayo'）以获得个性化消息？

我的主要目的是让X底轴只显示月份名称，当用户悬停在一个特定点上时显示整个日期

Answer 1

您可以使用 options 属性来自定义 tooltip 标题：

const options = {
  responsive: true,
  plugins:
  {
    tooltip:
    {
      callbacks:
      {
        title: (context) =>
        {
          return context[0].label
        },
      }
    },
  },
}

然后将 options 作为 prop 传递给您的 Line 组件：

<Line options = {options} data = {data} />

在上面的示例中，我 returning context[0].label 这是您已经在 x-axis 上看到的标签。您可以将 return 值更改为任何您想要的值，并且您也可以将其他必要的逻辑放入回调中。

例如，您可以选择 return context[0].parsed.x 而不是标签。或者您可以选择使用此值将最终标题放在一起 return。

阅读 docs 中有关工具提示配置的更多信息。

有没有办法只在图表上更改 react-chart-js 工具提示？

Is there a way to change the react-chart-js tooltip only on a graph?

javascript

reactjs

chart.js

react-chartjs