Javascript 更改chartjs-2中工具提示的z索引

我正在处理react-chartjs2的一个问题。我想以某种方式更改工具提示的z索引。我无法从文档中找到属性，因此我想知道您是否知道一个合适的解决方案。这是我的甜甜圈图表的截图

你可以看到这个问题。现在将显示工具提示的一半。我真的很感谢你的帮助

这是我的密码：

<Doughnut
        data={sectorsData}
        width={250}
        height={250}
        redraw
        options={{
          legend: {
            display: false
          },
          maintainAspectRatio: true,
          responsive: true,
          cutoutPercentage: 80,
          animation: {
            animateRotate: false,
            animateScale: false
          },
          elements: {
            center: {
              textNumber: `${sectorsCounter}`,
              text: intl.formatMessage({ id: 'pie.sectors' }),
              fontColor: '#656566',
              fontFamily: 'EurobankSans',
              fontStyle: 'normal',
              minFontSize: 25,
              maxFontSize: 25,
            }
          },
          /*eslint-disable */
          tooltips: {
            custom: (tooltip) => {
              tooltip.titleFontColor = '#656566';
              tooltip.titleFontFamily = 'EurobankSans';
              tooltip.bodyFontColor = '#656566';
              tooltip.bodyFontFamily = 'EurobankSans';
              tooltip.backgroundColor = '#eaeeef';
            },
            /* eslint-enable */
            callbacks: {
              title: (tooltipItem, data) => {
                const titles = data.datasets[tooltipItem[0]
                  .datasetIndex].titles[tooltipItem[0].index];
                return (
                  titles
                );
              },
              label: (tooltipItem, data) => {
                const labels =
                  NumberFormatter(data.datasets[tooltipItem.datasetIndex]
                  .labels[tooltipItem.index],
                  2,
                  decimalSep,
                  thousandSep
                  );
                return (
                  labels
                );
              },
              afterLabel: (tooltipItem, data) => {
                const afterLabels = data.datasets[tooltipItem.datasetIndex]
                  .afterLabels[tooltipItem.index];
                return (
                  afterLabels
                );
              },
            },
          },
        }}
      />

{
tooltip.titleFontColor='#656566'；
tooltip.titleFontFamily='EurobankSans'；
tooltip.bodyFontColor='#656566'；
tooltip.bodyFontFamily='EurobankSans'；
tooltip.backgroundColor='#eaeeef'；
},
/*eslint使能*/
回调：{
标题：（工具提示项，数据）=>{
const titles=data.dataset[工具提示项[0]
.datasetIndex]。标题[tooltipItem[0]。索引]；
返回(
标题
);
},
标签：（工具提示项，数据）=>{
常量标签=
NumberFormatter（data.datasets[tooltipItem.datasetIndex]
.labels[工具提示项索引]，
2.
小数点，
千年九月
);
返回(
标签
);
},
afterLabel：（工具提示项，数据）=>{
const afterLabels=data.datasets[tooltipItem.datasetIndex]
.afterLabels[工具提示项索引]；
返回(
后标签
);
},
},
},
}}
/>

为组件应用自定义的

类名

或

id

，只需为图表的

画布

元素设置更高的

z索引

从代码来看，类似这样的东西应该是可行的：

<div id="my-doughnut-chart-1">
<Doughnut
 ...props
/>
</div>

CSS:

#my-doughnut-chart-1画布{
z-index:9999//只是一个示例z-index，请根据您的项目进行更改
}

如果不想自定义工具提示，则可以尝试使用工具提示设置使其变短/变小：

可以从工具提示中删除多余/不需要的图元。而且还可以消除额外的间距

 tooltips: {
      "enabled": true,
      displayColors: false,
      caretSize: 0,
      titleFontSize: 9,
      bodyFontSize: 9,
      bodySpacing: 0,
      titleSpacing: 0,
      xPadding: 2,
      yPadding: 2,
      cornerRadius: 2,
      titleMarginBottom: 2,
      callbacks: {
        title: function () { }
      }
    }

---

更新了我的答案。有帮助吗？没那么多，因为我不知道确切的财产。我找不到工具提示CSS你不需要找到工具提示的CSS。您是否在您的示例中实现了我的解决方案？你能把它贴在这里吗？