Question

我有一个带有四个标签的饼图：

var data = [{
    data: [50, 55, 60, 33],
    labels: ["India", "China", "US", "Canada"],
    backgroundColor: [
        "#4b77a9",
        "#5f255f",
        "#d21243",
        "#B27200"
    ],
    borderColor: "#fff"
}];

我想使用chartjs-plugin-datalabels插件通过以下代码在每个Pie块中显示百分比值：

formatter: (value, ctx) => {

        let datasets = ctx.chart.data.datasets;

        if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
            let sum = 0;
            datasets.map(dataset => {
                sum += dataset.data[ctx.dataIndex];
            });
            let percentage = Math.round((value / sum) * 100) + '%';
            return percentage;
        } else {
            return percentage;
        }
    },
    color: '#fff',
}

所有饼图的价值都是100％，而不是百分比。这是JSFiddle（https://jsfiddle.net/kingBethal/a1Lvn4eb/7/）

Answer 1

更新小提琴，精确到小数点后两位。

您不是在计算总和，而是仅将每个值的当前值存储在总和中。

这是工作中的小提琴：https://jsfiddle.net/a1Lvn4eb/55/

['class' => 'kartik\grid\ActionColumn',
                'header' => 'Acciones',
                 'template'=> '{view} {update} {delete} ',

                'buttons'=> [
                    'update'=> function($url,$model) {
    if (Yii::$app->user->isGuest ? FALSE : (Yii::$app->user->identity->isAdmin)) {

                        return(Html::a( '<span class="glyphicon glyphicon-pencil"></span>', $url));

    } 

                    },

                    'delete'=>function($url,$model,$key) {


    if (Yii::$app->user->isGuest ? FALSE : (Yii::$app->user->identity->isAdmin)) {
                            return(Html::a('<span class="glyphicon glyphicon-trash"></span>', $url));

    } 

                    },

                ],

Answer 2

问题在于您如何计算总和。见下文。

Fiddle

 var data = [{
   data: [50, 55, 60, 33],
   labels: ["India", "China", "US", "Canada"],
   backgroundColor: [
     "#4b77a9",
     "#5f255f",
     "#d21243",
     "#B27200"
   ],
   borderColor: "#fff"
 }];

 var options = {
   tooltips: {
     enabled: false
   },
   plugins: {
     datalabels: {
       formatter: (value, ctx) => {

         let datasets = ctx.chart.data.datasets;

         if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
           let sum = datasets[0].data.reduce((a, b) => a + b, 0);
           let percentage = Math.round((value / sum) * 100) + '%';
           return percentage;
         } else {
           return percentage;
         }
       },
       color: '#fff',
     }
   }
 };


 var ctx = document.getElementById("pie-chart").getContext('2d');
 var myChart = new Chart(ctx, {
   type: 'pie',
   data: {
     datasets: data
   },
   options: options
 });

Answer 3

您可以将工具提示与Array reducer一起使用来执行百分比计算并显示它。

  tooltips: {
    callbacks: {
      label: function (tooltipItem, data) {
        try {
          let label = ' ' + data.labels[tooltipItem.index] || '';

          if (label) {
            label += ': ';
          }

          const sum = data.datasets[0].data.reduce((accumulator, curValue) => {
            return accumulator + curValue;
          });
          const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];

          label += Number((value / sum) * 100).toFixed(2) + '%';
          return label;
        } catch (error) {
          console.log(error);
        }
      }
    }
  }

Answer 4

我喜欢在接受的答案中添加一些内容， ctx.chart.data.datasets[0].data始终会为您提供全部数据，即使您通过单击图例过滤掉了一些数据也是如此。这意味着即使您过滤掉某些国家/地区，您也始终可以获得相同的百分比。

我已经使用context.dataset._meta[0].total来获取过滤后的总数。

这是有效的代码段：

var data = [{
  data: [50, 55, 60, 33],
  backgroundColor: [
    "#4b77a9",
    "#5f255f",
    "#d21243",
    "#B27200"
  ],
  borderColor: "#fff"
}];

var options = {
  tooltips: {
    enabled: true
  },
  plugins: {
    datalabels: {
      formatter: (value, ctx) => {

        let sum = ctx.dataset._meta[0].total;
        let percentage = (value * 100 / sum).toFixed(2) + "%";
        return percentage;


      },
      color: '#fff',
    }
  }
};


var ctx = document.getElementById("pie-chart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
  labels: ['India', 'China', 'US', 'Canada'],
    datasets: data
  },
  options: options
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<canvas id="pie-chart"></canvas>

ChartJS：数据标签：在饼图中显示百分比值

4 个答案: