Question

我正在遇到react-chartjs2的问题。我想以某种方式改变工具提示的z-index。我无法从文档中找到属性，所以我想知道你是否知道一个合适的解决方案。以下是我的圆环图

的屏幕截图

你可以看到我的问题。现在显示了一半的工具提示。我非常感谢你的帮助

这是我的代码：

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

Answer 1

为组件应用自定义className或id，只需为图表的z-index元素设置更高的canvas。

从代码判断，这样的事情应该有效：

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

CSS：

#my-doughnut-chart-1 canvas { z-index: 9999 // just an example z-index, change it according to your project }

Answer 2

如果您不想创建自定义工具提示，则可以尝试使用工具提示设置来使其更短或更小：

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

 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 () { }
      }
    }

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

2 个答案: