javascript - 带有回调函数的 Chart Js 自定义工具提示发送一些细节

Question

问题陈述： 我正在尝试在 ReactJs 中构建 chartJs。我想使用回调函数或类似选项制作自定义工具提示，以便我可以在工具提示中显示详细信息。有没有办法让它成为可能？

ChartJs 工具提示的输出

我的代码： 渲染函数

render() {
  return (
    <HorizontalBar
      data={this.state.allData}
      width={200}
      height={100}           

      options={{
                 
      tooltips: {
        // Disable the on-canvas tooltip
        enabled: false,
        callbacks: {
          label: function(tooltipItem, data) {
              console.log("pront ---- ", data)
          },
        },
                
        custom: function(tooltipModel, data) {
          // Tooltip Element
          var tooltipEl = document.getElementById('chartjs-tooltip');

          // Create element on first render
          if (!tooltipEl) {
              tooltipEl = document.createElement('div');
              tooltipEl.id = 'chartjs-tooltip';
              tooltipEl.innerHTML = '<table></table>';
              document.body.appendChild(tooltipEl);
          }

          // Set Text
          if (tooltipModel.body) {
            var titleLines = tooltipModel.title || [];
            var bodyLines = tooltipModel.body.map(getBody);

            var innerHtml = '<thead>';

            titleLines.forEach(function(title) {
              innerHtml += '<tr><th>' + title + '</th></tr>';
            });
            innerHtml += '</thead><tbody>';

            bodyLines.forEach(function(body, i) {
              var colors = tooltipModel.labelColors[i];
              var style = 'background:' + colors.backgroundColor;
              style += '; border-color:' + colors.borderColor;
              style += '; border-width: 2px';
              style += '; min-width: 5px; width: 10px; height: 10px; display: block;';
              var span = '<span style="' + style + '"></span>';
              innerHtml += '<tr><td>' + span + body + '</td></tr>';
            });
            innerHtml += '</tbody>';

            var tableRoot = tooltipEl.querySelector('table');
            tableRoot.innerHTML = innerHtml;
          }
        }
      },
                  
    }}
    />
  );
}

我想在带有 HTML UI 的工具提示中显示多行。