为工具提示标签重新绘制不同的 Xaxis 数据键

Question

在工具提示中突出显示时，我需要列出一个不同的值作为名称

这与 xaxis 数据键中定义的不同，因为它们对于渲染来说太长了

这只会根据数据键值设置工具提示标题，无论标签中设置什么

export function BarChartComponent({ dataSet, legendType, currentTheme }: GenericChartProps) {
  return (
    <Shimmering isLoading={dataSet === undefined || dataSet?.length === 0}>
      <GenericChartContainer>
        <ResponsiveContainer width="100%" height="100%">
          <BarChart
            data={dataSet}
            margin={{
              top: 40,
              right: 15,
              bottom: 15,
            }}
          >
            <CartesianGrid />
            <XAxis
              textAnchor="start"
              interval={0}
              dataKey="label"
              tick={<CustomizedAxisTick x={undefined} y={undefined} payload={undefined} />}
            />
            <YAxis />
            <Tooltip
              wrapperStyle={{ zIndex: 1000 }}
              content={<CustomTooltip active={undefined} payload={undefined} label={'name'} />}
              label={'name'} // Set label for tooltip
            />
          
......

import React from 'react';

const CustomizedAxisTick = ({ x, y, payload }) => {
  return (
    <g transform={`translate(${x},${y})`}>
      <text x={0} y={0} dy={16} textAnchor="start" fill="#666" transform="rotate(45)">
        {payload.value}
      </text>
    </g>
  );
};

export { CustomizedAxisTick };

import React from 'react';

export const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div
        className="custom-tooltip"
        style={{
          background: '#FFFFFF',
          padding: '10px',
          borderWidth: '1px',
          borderStyle: 'solid',
          borderColor: '#CCCCCC',
          borderRadius: '5px',
        }}
      >
        <p className="label">{`${label}`}</p>
        <div>
          {payload.map(pld => (
            <div style={{ display: 'inline-block', padding: 10 }}>
              <div style={{ color: pld.fill }}>
                {pld.dataKey}
                {': '}
                {pld.value}
              </div>
              <div></div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  return null;
};

这是我正在使用的元素结构的示例：

                    "value": [
                        {
                            "Active": 1419,
                            "name": "ABCD",
                            "Inactive": 1640,
                            "label": "abcdefgh"
                        },
                        {
                            "Active": 10850,
                            "name": "ABCD",
                            "Inactive": 4702,
                            "label": "abcdefgh"
                        },

Answer 1

也许还有另一种方法，但这种方法似乎可以很好地满足我的需要，它允许您完全自定义工具提示并轻松映射单个元素道具，而不会影响 xaxis 中渲染的内容，但它的代码比我最初的意图是什么，必须重新应用初始 css 样式

<XAxis textAnchor="start" interval={0} dataKey="label" tick={<CustomizedAxisTick/>} />
<Tooltip wrapperStyle={{ zIndex: 1000 }} content={<CustomTooltip />}/>

import React from 'react';
import { StyledCustomTooltip, StyledTooltipPayload } from './styles';

export type CustomTooltipProps = {
  active?: any;
  payload?: any;
  label?: any;
};

export const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
  if (active && payload && payload.length) {
    const firstPayload = payload[0]; // Assuming payload is an array of objects
    const name = firstPayload?.payload?.name;

    return (
      <StyledCustomTooltip>
        <div>
          <p>{label}</p>
          {name && <div>Name: {name}</div>}
          {payload.map((pld, index) => (
            <StyledTooltipPayload key={index}>
              <div style={{ color: pld.fill }}>
                {pld.dataKey}: {pld.value}
              </div>
            </StyledTooltipPayload>
          ))}
        </div>
      </StyledCustomTooltip>
    );
  }

  return null;
};