Question

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

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

  };

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

Answer 1

似乎正在使用chartjs-plugin-labels，在这种情况下，按照the documentation，将自定义函数传递给render选项可以解决问题：

const data = [1, 2, 7],
  myChartOptions = {
    responsive: true,
    animation: {
      animateScale: true,
      animateRotate: true
    },
    plugins: {
      labels: {
        render: args => {
          if (args.percentage < 20) {
            return '';
          }
          return args.percentage + '%';
        },
        fontColor: '#000000',
        precision: 2,
      }
    }
  };

new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: {
    datasets: [{
      label: 'series 1',
      data: data,
      backgroundColor: ['pink', 'lightgreen', 'lightblue'],
    }]
  },
  options: myChartOptions
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart"></canvas>

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

1 个答案: