使用react-chartjs-2库自定义工具提示

Question

我遇到了chartjs提供的默认工具提示问题，因为我无法在工具提示中添加html。我一直在研究如何在工具提示中添加html / jsx。我在这里看到一个使用自定义工具提示的例子Chart JS Show HTML in Tooltip。有人能给我一个例子，告诉我如何使用react-chartjs-2库实现相同的目标吗？

Answer 1

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

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>
  );
}

您可以使用React Popper Tooltip提供的工具提示或自己滚动 - 将top和left传递到工具提示以进行定位，并且应使用date和value（在我的示例中）在工具提示中显示数据。

Answer 2

this.chart.chart_instance.canvas.getBoundingClientRect();

如果你在chart_instance上遇到一些错误，你应该检查元素值的父级。

试试这个：

this.chart.chartInstance.canvas.getBoundingClientRect();

Answer 3

记得在React中思考（这并不总是那么容易）。使用mycustomtooltipfunction在你的React类中设置状态（具体来说，将传递给mycustometooltipfunction的工具提示添加到状态 - 这将导致调用render。现在在你的类的render函数中，检查该状态是否存在并添加JSX为您的工具提示。

class MyChart extends Component {

    constructor(props) {
        super(props);
        this.state = {
            tooltip : undefined
        };
    }

    showTooltip = (tooltip) => {
        if (tooltip.opacity === 0) {
            this.setState({
                tooltip : undefined
            });
        } else {
            this.setState({ 
                tooltip
            });
        }
     }

     render() {
         const { tooltip } = this.state;

         let options = {
             ...
             tooltips : {
                 enabled : false,
                 custom : this.showTooltip,
             }
         }

         let myTooltip;
         if (tooltip) {
           // MAKE YOUR TOOLTIP HERE - using the tooltip from this.state.tooltip, or even have a tooltip JSX class
         }

         return (
             <div>
                 {myTooltip}
                 <Line ref="mygraph" key={graphKey} data={data} options={options} height={graphHeight} width={graphWidth}/>
             </div>
         )
    }
}

`