React中自定义BlizCharts Tooltip样式无效问题求助

在React组件中使用BizCharts的StackedBarChart时，直接在tooltip配置里添加style属性无法修改Tooltip外观（比如设置文字颜色、背景色），你尝试的以下配置没有效果：

style: {
  fill: 'red',
  backgroundColor: '#000',
},

你的原组件代码如下：

<Box>
           
  <Box display='flex' justifyContent='space-between'>
    <p
      style={{
        fontFamily: 'Roboto Condensed, sans-serif',
        marginBottom: '.5rem',
      }}
    >
      {props.title}
    </p>
    <Box>
      <DownloadButton                 
      />
    </Box>
  </Box>
  <Box></Box>

  {data && (
    <StackedBarChart
      onGetG2Instance={(chartInstance) => {
        setCanvas(chartInstance.chart.canvas);
      }}
      id='StackedBarChart'
      data={data}
      height={650}
      autoFit
      legend={{ position: 'bottom', flipPage: false }}
      yField={props.yField}
      xField={props.xField}
      stackField={props.stackField}
      padding='auto'
      color={['red', '#00A1C8', '#B3CEE7', '#808080']}
      tooltip={{
        formatter: (d) => {
          return {
            name: d['Pesticide region'] ? d['Pesticide region'] : d.region,
            value:
              (d['Region proportion per country']
                ? d['Region proportion per country']
                : d.value) + '%',
          };
        },
      }}
      yAxis={{
        label: {
          style: {
            fontFamily: 'Roboto Condensed, sans-serif',
          },
        },
      }}
      xAxis={{
        label: {
          style: {
            fontFamily: 'Roboto Condensed, sans-serif',
          },
          formatter: (a, b, c) => {
            return a + '%';
          },
        },
        max: 100,
      }}
    />
  )}
</Box>

解决办法 #

BizCharts的Tooltip不支持直接通过style属性设置样式，你可以通过以下两种方式修改：

方式1：完全自定义Tooltip内容（推荐，样式可控性最强）

使用customContent属性自定义Tooltip的HTML结构和样式，完全控制外观：

tooltip={{
  formatter: (d) => {
    return {
      name: d['Pesticide region'] ? d['Pesticide region'] : d.region,
      value: (d['Region proportion per country'] ? d['Region proportion per country'] : d.value) + '%',
    };
  },
  customContent: (title, items) => {
    return `
      <div style="background-color: #000; padding: 10px; border-radius: 4px; color: red;">
        <p style="margin: 0 0 8px 0;">${title}</p>
        ${items.map(item => `
          <div style="display: flex; align-items: center; margin-bottom: 4px;">
            <span style="width: 12px; height: 12px; background: ${item.color}; border-radius: 50%; display: inline-block; margin-right: 8px;"></span>
            <span>${item.name}: ${item.value}</span>
          </div>
        `).join('')}
      </div>
    `;
  }
}}

方式2：使用内置样式配置项

部分BizCharts版本支持通过containerStyle（容器样式）和itemStyle（条目样式）来修改Tooltip外观：

tooltip={{
  formatter: (d) => {
    return {
      name: d['Pesticide region'] ? d['Pesticide region'] : d.region,
      value: (d['Region proportion per country'] ? d['Region proportion per country'] : d.value) + '%',
    };
  },
  containerStyle: {
    backgroundColor: '#000',
    padding: '8px',
    borderRadius: '4px'
  },
  itemStyle: {
    color: 'red'
  }
}}

说明 #

BizCharts的Tooltip样式配置是分层次的，直接的style属性不属于它的有效配置项，需要针对容器、条目等不同部分使用对应的配置参数，或者通过自定义HTML内容实现完全定制。

内容的提问来源于stack exchange，提问作者tinaa