ChartJs-甜甜圈图-如果百分比小于限制，如何删除标签

Question

我正在使用chart.js中的甜甜圈在我的应用程序中进行可视化。如果百分比为静态值，例如20％，则需要删除标签这就是我用来生成标签的内容

 var myChartOptions= {
    responsive: true,
    animation: {
      animateScale: true,
      animateRotate: true
    },
    plugins: {
         labels: {
      render: 'percentage',
      fontColor: '#000000',
      precision: 2,
    }
    }

  };

我已经为此工作了一段时间，没有运气。

Answer 1

首先，解决方案not与图表类型（甜甜圈，条形图或饼图）有关。接下来，您应该使用filter函数（默认为null）。

从图例中过滤图例项目。接收2个参数，一个图例项目和图表数据。 https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration

“噩梦”-没有示例-缺少有关此主题的文档（在StackOverflow上，您也找不到针对此特定情况的解决方案）。

我发现“最基本的例子就像魔术”：

数据：

  var data = {
    labels: ["Africa", "Asia", "Europe"],
    datasets: [{
      label: "Population (millions)",
      backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f"],
      data: [1000,1500,2000]
    }]
  };

“技巧”-获取值数组：

data.datasets[0]

像这样，我得到了data数组。

下一个-filter 循环抛出数据-每次我通过index获得当前值。基本数组的想法：How to get value at a specific index of array In JavaScript?

var currentDataValue =  data.datasets[0].data[index];

最后添加您要与此值相关的任何if：

if (currentDataValue > 1000){
  return true;
}

完整示例：

如果值大于1,000，则隐藏图例：

var data = {
  labels: ["Africa", "Asia", "Europe"],
  datasets: [{
    label: "Population (millions)",
    backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f"],
    data: [1000,1500,2000]
  }]
};

var options = {
  responsive: true,
  title: {
    text: 'Hide africa legened (Greater than 1000)',
    position: 'top',
    display: true
  },
  legend: {
    display: true,
    labels: {
      /* filter */
      filter: function(legendItem, data) {
        /* filter already loops throw legendItem & data (console.log) to see this idea */
        var index = legendItem.index;
        var currentDataValue =  data.datasets[0].data[index];
        console.log("current value is: " + currentDataValue)
        if (currentDataValue > 1000)
        {
          return true; //only show when the label is cash
        }
      },
      /* generateLabels */
      generateLabels(chart) {
        const data = chart.data;
        if (data.labels.length && data.datasets.length) {
          /* inner loop throw lables */
          return data.labels.map((label, i) => {
            var backgroundColor = data.datasets[0].backgroundColor[i];
            return {
              text: label + " | " + data.datasets[0].data[i],
              fillStyle: backgroundColor,
              // Extra data used for toggling the correct item
              index: i
            };
          });
        }
        return [];
      }

    },

  },
  scales: {
    xAxes: [{
      display: true
    }],
    yAxes: [{
      display: true
    }]
  }
};


new Chart(document.getElementById("chart"), {
  type: 'pie',
  data: data,
  options: options
});

<canvas id="chart" width="800" height="450"></canvas>
   
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

通过上面的示例，我也使用generateLabels想法（在标签文本旁边添加值）。