Question

我正在努力让我的数据点类别之间的百分比显示在我的自定义图例中。我知道我很接近（因为我让他们为工具提示工作）但我还没能完全解决它。

现在我在每个类别中都有1个项目，我的工具提示每个显示25％（正确），但我的传奇显示每个lol明显错误1％。

这是我的配置：

＆＃13;

var chart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    datasets: [{
      data: getValues,
      backgroundColor: getColorValues,
    }],
    labels: getLabels
  },
  options: {
    responsive: true,
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
         
          var dataset = data.datasets[tooltipItem.datasetIndex];
          
          var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
            return previousValue + currentValue;
          });
          
          var currentValue = dataset.data[tooltipItem.index];

          var precentage = Math.floor(((currentValue / total) * 100) + 0.5);

          return precentage + "%";
        }
      }
    },
    legendCallback: function(chart) {
      var text = [];
      text.push('<ul class="' + chart.id + '-legend">');

      var data = chart.data;
      var datasets = data.datasets;
      var labels = data.labels;

      if (datasets.length) {
        for (var i = 0; i < datasets[0].data.length; ++i) {
          text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
          if (labels[i]) {
            text.push(labels[i] + ' (' + datasets[0].data[i] + '%)');
          }
          text.push('</li>');
        }
      }
      text.push('</ul>');
      return text.join('');
    },
    legend: {
      display: false,
    },
    elements: {
      arc: {
        borderWidth: 0
      }
    },
    cutoutPercentage: 70,
    title: {
      display: true
    },
    animation: {
      animateScale: true,
      animateRotate: true
    }
  }
});

document.getElementById('js-legend').innerHTML = chart.generateLegend();

＆＃13;

我真的很感激任何帮助！

Answer 1

使用以下内容替换 legendCallback 功能：

legendCallback: function(chart) {
   var text = [];
   text.push('<ul class="' + chart.id + '-legend">');
   var data = chart.data;
   var datasets = data.datasets;
   var labels = data.labels;
   if (datasets.length) {
      for (var i = 0; i < datasets[0].data.length; ++i) {
         text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
         if (labels[i]) {
            // calculate percentage
            var total = datasets[0].data.reduce(function(previousValue, currentValue, currentIndex, array) {
               return previousValue + currentValue;
            });
            var currentValue = datasets[0].data[i];
            var percentage = Math.floor(((currentValue / total) * 100) + 0.5);

            text.push(labels[i] + ' (' + percentage + '%)');
         }
         text.push('</li>');
      }
   }
   text.push('</ul>');
   return text.join('');
}

基本上，您还需要计算图例的标签的百分比，就像您在处理工具提示一样。

ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇᴀᴍᴘʟᴇ

var getValues = [1, 2, 3],
   getLabels = ['Jan', 'Feb', 'Mar'],
   getColorValues = ['red', 'green', 'blue']
var chart = new Chart(ctx, {
   type: 'doughnut',
   data: {
      datasets: [{
         data: getValues,
         backgroundColor: getColorValues,
      }],
      labels: getLabels
   },
   options: {
      responsive: true,
      tooltips: {
         callbacks: {
            label: function(tooltipItem, data) {

               var dataset = data.datasets[tooltipItem.datasetIndex];

               var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
                  return previousValue + currentValue;
               });

               var currentValue = dataset.data[tooltipItem.index];

               var precentage = Math.floor(((currentValue / total) * 100) + 0.5);

               return precentage + "%";
            }
         }
      },
      legendCallback: function(chart) {
         var text = [];
         text.push('<ul class="' + chart.id + '-legend">');

         var data = chart.data;
         var datasets = data.datasets;
         var labels = data.labels;

         if (datasets.length) {
            for (var i = 0; i < datasets[0].data.length; ++i) {
               text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
               if (labels[i]) {

                  // calculate percentage
                  var total = datasets[0].data.reduce(function(previousValue, currentValue, currentIndex, array) {
                     return previousValue + currentValue;
                  });
                  var currentValue = datasets[0].data[i];
                  var precentage = Math.floor(((currentValue / total) * 100) + 0.5);

                  text.push(labels[i] + ' (' + precentage + '%)');
               }
               text.push('</li>');
            }
         }
         text.push('</ul>');
         return text.join('');
      },
      legend: {
         display: false,
      },
      elements: {
         arc: {
            borderWidth: 0
         }
      },
      cutoutPercentage: 70,
      title: {
         display: true
      },
      animation: {
         animateScale: true,
         animateRotate: true
      }
   }
});

document.getElementById('js-legend').innerHTML = chart.generateLegend();

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
<div id="js-legend"></div>

传奇中的Chartjs百分比

1 个答案: