带有 react-chartjs-2 库的自定义工具提示

问题描述

限时删除！！

我对 chartjs 提供的默认工具提示有疑问，因为我无法在工具提示中添加 html.我一直在研究如何在工具提示中添加 html/jsx.我在这里看到了一个使用自定义工具提示的示例Chart JS Show HTML in Tooltip.有人可以给我举个例子，如何用 react-chartjs-2 库实现同样的效果?

解决方案

你必须使用 tooltip 属性中的 custom 回调来定义你自己的定位并将悬停的数据集设置为组件状态

状态 = {顶部:0，左:0，日期: ''，值:0，};_chartRef = React.createRef();setPositionAndData = (顶部、左侧、日期、值) =>{this.setState({top, left, date, value});};使成为() {图表选项 = {工具提示":{启用":假，模式":x"，相交":假，自定义":(工具提示模型)=>{//如果未定义图表，则提前返回图表 = this._chartRef.current;如果(！图表){返回;}//当 chartjs 确定您已经悬停时隐藏工具提示if (tooltipModel.opacity === 0) {this.hide();返回;}常量位置 = chart.chartInstance.canvas.getBoundingClientRect();//假设你的工具提示是 `position: fixed`//设置工具提示的位置const left = position.left + tooltipModel.caretX;const top = position.top + tooltipModel.caretY;//设置在工具提示中显示数据的值常量日期 = tooltipModel.dataPoints[0].xLabel;常量值 = tooltipModel.dataPoints[0].yLabel;this.setPositionAndData({top, left, date, value});},}}返回 (
<行数据={data} options={chartOptions} ref={this._chartRef}/>{ this.state.showTooltip?<工具提示样式={{top: this.state.top, left: this.state.left}}><div>日期:{this.state.date}</div><div>值:{this.state.value}</div></工具提示>: 空值}</div>);}

您可以使用 React Popper Tooltip 提供的工具提示或自己动手制作 -将 top 和 left 传递给工具提示进行定位，而 date 和 value (在我的示例中)应该用于在工具提示中显示数据.

I am having issue with the default tooltip that chartjs provides as I can not add html inside the tooltips. I had been looking at how i can add the html/jsx inside the tooltip. I see an example with using customized tooltips here Chart JS Show HTML in Tooltip.can someone point me an example how to achieve the same with react-chartjs-2 library?

解决方案

You have to use the custom callback in the tooltip property to define your own positioning and set the hovered dataset in the component state

state = {
  top: 0,
  left: 0,
  date: '',
  value: 0,
};

_chartRef = React.createRef();

setPositionAndData = (top, left, date, value) => {
  this.setState({top, left, date, value});
};

render() {
  chartOptions = {
    "tooltips": {
      "enabled": false,
      "mode": "x",
      "intersect": false,
      "custom": (tooltipModel) => {
        // if chart is not defined, return early
        chart = this._chartRef.current;
        if (!chart) {
          return;
        }

        // hide the tooltip when chartjs determines you've hovered out
        if (tooltipModel.opacity === 0) {
          this.hide();
          return;
        }

        const position = chart.chartInstance.canvas.getBoundingClientRect();

        // assuming your tooltip is `position: fixed`
        // set position of tooltip
        const left = position.left + tooltipModel.caretX;
        const top = position.top + tooltipModel.caretY;

        // set values for display of data in the tooltip
        const date = tooltipModel.dataPoints[0].xLabel;
        const value = tooltipModel.dataPoints[0].yLabel;

        this.setPositionAndData({top, left, date, value});
      },
    }
  }

  return (
    <div>
      <Line data={data} options={chartOptions} ref={this._chartRef} />
      { this.state.showTooltip
        ? <Tooltip style={{top: this.state.top, left: this.state.left}}>
            <div>Date: {this.state.date}</div>
            <div>Value: {this.state.value}</div>
          </Tooltip>
        : null
      }
    </div>
  );
}

You can use the tooltips supplied by React Popper Tooltip or roll your own - pass the top and left to the tooltip for positioning, and the date and value (in my example) should be used to show the data in the tooltip.

这篇关于带有 react-chartjs-2 库的自定义工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..