javascript - react-chartjs-2 でゼロ値を処理する

Question

3 つのドーナツ円グラフをカスタマイズするために、react-chartjs-2 を使用しています。このライブラリは多くの機能を備えていますが、ここで問題が発生しています。ゼロ値を処理する方法がわかりません。すべての値がゼロの場合、正しい円グラフは描画されません。ゼロ値を処理する方法のアイデアはありますか?? これは、ドーナツ円グラフを描画するための私のコードです:

const renderPortfolioSectorPie = (sectors, intl) => {
  if (sectors.length > 0) {
    const sectorsName = sectors
      .map(sector => sector.name);
    const sectorsValue = sectors
      .map(sector => sector.subtotal);
    const sectorsPercentage = sectors
      .map(sector => sector.percentage);
    const customeSectorsPercentage = sectorsPercentage.map(h =>
      `(${h})`
    );
    let sectorsCounter = 0;
    for (let i = 0; i < sectorsName.length; i += 1) {
      if (sectorsName[i] !== sectorsName[i + 1]) {
        sectorsCounter += 1;
      }
    }
    const sectorsData = {
      datasets: [{
        data: sectorsValue,
        backgroundColor: [
          '#129CFF',
          '#0c6db3',
          '#4682B4',
          '#00FFFF',
          '#0099FF',
          '#3E3BF5',
          '#3366CC',
          '#3399FF',
          '#6600FF',
          '#3366CC',
          '#0099CC',
          '#336699',
          '#3333FF',
          '#2178BA',
          '#1F7AB8',
          '#1C7DB5'
        ],
        hoverBackgroundColor: [
          '#129cff',
          '#0c6db3',
          '#4682B4',
          '#00FFFF',
          '#0099FF',
          '#3E3BF5',
          '#3366CC',
          '#3399FF',
          '#3366CC',
          '#0099CC',
          '#336699',
          '#3333FF',
          '#2178BA',
          '#1F7AB8',
          '#1C7DB5'
        ],
        titles: sectorsName,
        labels: sectorsValue,
        afterLabels: customeSectorsPercentage,
      }]
    };

    return (
      <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: '#4a4a4a',
              fontFamily: "'EurobankSans'",
              fontStyle: 'normal',
              minFontSize: 25,
              maxFontSize: 25,
            }
          },
          /*eslint-disable */
          tooltips: {
            custom: (tooltip) => {
              tooltip.titleFontFamily = 'Helvetica';
              tooltip.titleFontColor = 'rgb(0,255,255)';
            },
            /* eslint-enable */
            callbacks: {
              title: (tooltipItem, data) => {
                const titles = data.datasets[tooltipItem[0]
                  .datasetIndex].titles[tooltipItem[0].index];
                return (
                  titles
                );
              },
              label: (tooltipItem, data) => {
                const labels = data.datasets[tooltipItem.datasetIndex]
                  .labels[tooltipItem.index];
                return (
                  labels
                );
              },
              afterLabel: (tooltipItem, data) => {
                const afterLabels = data.datasets[tooltipItem.datasetIndex]
                  .afterLabels[tooltipItem.index];
                return (
                  afterLabels
                );
              },
            },
          },
        }}
      />
    );
  }