如何在使用react-chartjs-2时集成基本的Chartjs自定义？

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

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

我正在尝试将这个tooltip-based-on-mouse-position定制集成到一个react-js-2条形图中。我看到了放置新选项的位置：

options: {
  tooltips: {
    mode: 'index',
    position: 'cursor',
    intersect: false
  }
}

在我现有的选项块声明中。但我不明白如何/在应用程序中的何处集成相关函数？

Chart.Tooltip.positioners.cursor = function(chartElements, coordinates) {
  return coordinates;
};

我试过在几个不同的地方简单地将它声明为Chart.Tooltip.positioners.cursor = ...或ChartJS.Tooltip.positioners.cursor = ...或Tooltip.positioners.cursor = ...，但它要么导致错误，要么没有效果。我正在使用ChartJS v3.8.0和react-js-2 v4.1.0。谢谢。

chart.js

来源：https://stackoverflow.com/questions/72528159/how-to-integrate-basic-chartjs-customizations-when-using-react-chartjs-2

1条答案

按热度按时间

hfyxw5xn1#

您的选项错误，您需要在options.plugins.tooltip名称空间中定义工具提示选项，而不是在options.tooltips名称空间中。
示例：
第一个
React导入：

import { Chart, registerables, Tooltip } from "chart.js";
import { Chart as ReactChartJs } from "react-chartjs-2";

Chart.register(...registerables);

Tooltip.positioners.mouse = function(items, evtPos) {
  return evtPos
};

const options = {
  plugins: {
    tooltip: {
      position: 'mouse',
      intersect: false
    }
  }
}

<ReactChartJs type="line" data={data} options={options} />

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

我来回答

如何在使用react-chartjs-2时集成基本的Chartjs自定义？

1条答案

相关问题

热门标签

最新问答