React Charts -即使值为零也显示饼图(当所有值都为零时,均匀分布各节并显示彩色图表)

whhtz7ly  于 2023-01-09  发布在  Chart.js
关注(0)|答案(1)|浏览(132)

因此react-charts-js-2默认情况下会在两个值都为零时隐藏图表。我们试图避免出现“No data available”(无可用数据)之类的消息或显示表示无值的图标。我们希望实现的是无论值是否为零都显示图表。将图表减半(保留计算出的颜色(一个原色和一个变亮的颜色))并且还在悬停时显示零值。
这是可以实现的吗?

  • 只有当两个值都为零时才会发生这种情况。(所有N个值,在我的例子中N === 2)

当所有值为零时所需的输出如下所示

import { Pie } from "react-chartjs-2";
import { ArcElement, Chart as ChartJS, Legend, Tooltip } from "chart.js";
ChartJS.register(ArcElement, Tooltip, Legend);

const LimitChart = ({ data, sectorNameBySectorCode }: { data: ISectorLimit, sectorNameBySectorCode: string }) => {

  const { t } = useTranslation();

  const bothZero = !data.remainingLimit && !data.usedLimit;

  const chartData = React.useMemo(() => {
    return {
      labels: [t("label.remainingLimit"), t("label.usedLimit")],
      datasets: [
        {
          data: [data.remainingLimit || 0.1, data.usedLimit || 0.1],
          backgroundColor: [
            chartColorLookup[sectorNameBySectorCode as SectorNames].secondary,
            chartColorLookup[sectorNameBySectorCode as SectorNames].primary
          ],
          borderWidth: 2,
        },
      ],
    };
  }, [data]);

  return (
    <Pie data={chartData} width={200} height={200}/>
  );
};
kyks70gy

kyks70gy1#

有条件地呈现超小值解决了我的问题。

const bothZero = !data.remainingLimit && !data.usedLimit
  const conditionalData = bothZero
    ? [1e-10, 1e-10]
    : [data.remainingLimit, data.usedLimit];

  const chartData = React.useMemo(() => {
    return {
      labels: [t("label.remainingLimit"), t("label.usedLimit")],
      datasets: [
        {
          data: conditionalData,
          backgroundColor: [secondary, primary],
          hoverBackgroundColor: [secondary, primary],
          borderWidth: 4,
        },
      ],
    };
  }, [data]);

相关问题