Pie/Polar/Doughnut 图表中数据为空或零时如何隐藏字段和删除线图例？

Question

以下是我的结果图表

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

Link - Reference Pie Chart

提前致谢。

Answer 1

我post正在回答这个问题，希望它对以后的人有所帮助。如果找到，您还可以 post 更好的解决方案。

在深入研究库文件后，我意识到我的问题没有直接的答案。但是我们可以通过在数据值为 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，则函数 returns 为空值。在大多数情况下，我还将图表旋转 15 度以使标签水平对齐。

参考 - Chart.js documentation

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

Pie/Polar/Doughnut 图表中数据为空或零时如何隐藏字段和删除线图例？

How to hide Fields and Strike-through Legends when the data is empty or Zero in Pie/Polar/Doughnut Chart?

javascript

typescript

chart.js

ng2-charts

angular