Гистограмма Recharts - условно отображать метки только на определенных столбцах в гистограмме с накоплением

Question

Я пытаюсь показать панель с четырьмя верхними значениями и наложить на них метки. Чтобы дать больше контекста, я планирую отобразить эти метки вне графика и написать об этом более подробно. Как показать метки только на определенных столбцах гистограммы. Я хочу показывать метки только на тех барах с 4 верхними значениями. Коды кодов и ссылок, если это поможет: https://codesandbox.io/s/fervent-chandrasekhar-o39ms

import React, { PureComponent } from "react";
import {
  BarChart,
  Bar,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  LabelList
} from "recharts";

const data = [
  {
    name: "Page A",
    uv: 4000,
    pv: 2400,
    amt: 2400,
    highlight: "d" // the bar of uv in Page A should show 'd' as label inside
  },
  {
    name: "Page B",
    uv: 3000,
    pv: 1398,
    amt: 2210
  },
  {
    name: "Page C",
    uv: 2000,
    pv: 9800,
    amt: 2290,
    highlight: "a", // the bar of pv in Page C should show 'a' as label inside
  },
  {
    name: "Page D",
    uv: 2780,
    pv: 3908,
    amt: 2000
  },
  {
    name: "Page E",
    uv: 1890,
    pv: 4800,
    amt: 2181,
    highlight: "b" // the bar of pv in Page E should show 'b' as label inside
  },
  {
    name: "Page F",
    uv: 2390,
    pv: 3800,
    amt: 2500
  },
  {
    name: "Page G",
    uv: 3490,
    pv: 4300,
    amt: 2100,
    highlight: "c" // the bar of pv in Page G should show 'c' as label inside
  }
];

export default class Example extends PureComponent {

  render() {
    return (
      <BarChart
        width={600}
        height={300}
        data={data}
        margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
      >
        <XAxis dataKey="name" />
        <YAxis />
        <CartesianGrid strokeDasharray="3 3" />
        <Tooltip />
        <Legend />
        <Bar dataKey="pv" stackId="a" fill="#8884d8">
          // <LabelList dataKey="highlight" position="middle" /> ... This shows label in all bars with uv as key, I want only certain bars to show label that have highest values
        </Bar>
        <Bar dataKey="uv" stackId="a" fill="#82ca9d">
          // <LabelList dataKey="highlight" position="middle" /> ... This shows label in all bars with uv as key, I want only certain bars to show label that have highest values
        </Bar>
      </BarChart>
    );
  }
}

Answer 1

хорошо, похоже, я мог бы найти решение. Включает наличие каких-либо указателей внутри массива исходных данных, а затем отображение пользовательских меток с условиями внутри.

import React, { PureComponent } from "react";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  LabelList
} from "recharts";

const data = [
  {
    name: "Page A",
    uv: 4000,
    pv: 2400,
    amt: 2400
  },
  {
    name: "Page B",
    uv: 3000,
    pv: 1398,
    amt: 2210
  },
  {
    name: "Page C",
    uv: 4900,
    xv: 3000,
    pv: 5000,
    amt: 2290,
    highlights: [
      {
        marker: "a",
        key: "pv"
      },
      {
        marker: "b",
        key: "uv"
      }
    ]
  },
  {
    name: "Page D",
    uv: 4700,
    pv: 3908,
    amt: 2000,
    highlights: [
      {
        marker: "c",
        key: "uv"
      }
    ]
  },
  {
    name: "Page E",
    uv: 1890,
    pv: 4800,
    amt: 2181
  },
  {
    name: "Page F",
    uv: 2390,
    pv: 3800,
    amt: 2500
  },
  {
    name: "Page G",
    uv: 3490,
    pv: 4300,
    amt: 2100
  }
];

const renderLabel = (prop, dataKey) => {
  const index = prop.index;
  const target = data[index];
  const highlights = target.highlights || [];

  if (highlights.length > 0) {
    for (let i = 0; i < highlights.length; i++) {
      if (highlights[i].key === dataKey) {
        return highlights[i].marker;
      }
    }
  }
};

export default class Example extends PureComponent {
  render() {
    return (
      <BarChart
        width={600}
        height={300}
        data={data}
        margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
      >
        <XAxis dataKey="name" />
        <YAxis />
        <CartesianGrid strokeDasharray="3 3" />
        <Tooltip />
        <Legend />
        <Bar dataKey="pv" stackId="a" fill="#8884d8">
          <LabelList
            content={props => renderLabel(props, "pv")}
            position="center"
          />
        </Bar>
        <Bar dataKey="xv" stackId="a" fill="#bb11a9">
          <LabelList
            content={props => renderLabel(props, "xv")}
            position="center"
          />
        </Bar>
        <Bar dataKey="uv" stackId="a" fill="#82ca9d">
          <LabelList
            content={props => renderLabel(props, "uv")}
            position="center"
          />
        </Bar>
      </BarChart>
    );
  }
}