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

noj0wjuj 于 2022-11-07 发布在 Chart.js

关注(0)|答案(1)|浏览(133)

我有以下几点：

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底轴只显示月份名称，而当用户将鼠标悬停在一个特定点上时显示整个日期

chart.js

来源：https://stackoverflow.com/questions/72234050/is-there-a-way-to-change-the-react-chart-js-tooltip-only-on-a-graph

1条答案

按热度按时间

qvtsj1bj1#

您可以按如下所示使用options属性自定义tooltip标题：

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

然后将options作为prop传递给您的Line组件：
<Line options = {options} data = {data} />
在上面的例子中，我返回的是context[0].label，也就是你已经在x轴上看到的标签。你可以把返回值更改为任何你想要的值，也可以在回调中放入其他必要的逻辑。
例如，您可以选择返回context[0].parsed.x而不是标签，或者您可以选择使用该值来组合要返回的最终标题。
在docs中阅读更多关于工具提示配置的信息。

赞(0）回复(0）举报 2022-11-07

我来回答

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

1条答案

相关问题

热门标签

最新问答