javascript - 饼图/极地/甜甜圈图中数据为空或为零时如何隐藏字段和删除线图例？

Question

以下是我的结果图表

这里的传奇Happy和Very Happy的值为0，因此它们相互重叠，无法读取。那么，如何在加载自身时隐藏这些值并删除图例，如下图所示？是的，它是一个动态加载的图表。

链接 -参考饼图

提前致谢。

标签： javascriptangulartypescriptchart.jsng2-charts

Answer 1

我发布了这个答案，希望对以后的人有所帮助。如果找到，您还可以发布更好的解决方案。

在对文件库进行了深入研究之后，我意识到我的问题没有直接的答案。但是我们可以通过在数据值为 0 的情况下清空标签文本来实现。

为此，我们必须按如下方式编辑图表选项，

public pieChartOptions: ChartOptions = {
    responsive: true,
    legend: {
      position: 'top',
    },
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          const label = ctx.chart.data.labels[ctx.dataIndex];
          if (ctx.dataset.data[ctx.dataIndex] > 0)
            return label + " : " + ctx.dataset.data[ctx.dataIndex];
          else
            return "" // retun empty if the data for label is empty
        },
      }
    },
    showLines: true,
    spanGaps: true,
    cutoutPercentage: 1,
    rotation: 15, // rotate the chart
  };

如果相应标签的数据为 0，则函数在此处返回空值。此外，我将图表旋转 15 度以使标签在大多数情况下水平对齐。

参考 - Chart.js 文档

因此，我为用户提供了更好的视图，并且解决了重叠问题。谢谢。