将百分比添加到标签徽章 - donut chart.js答案

【问题标题】：Add percentage to label badge - doughnut chart.js将百分比添加到标签徽章 - donut chart.js
【发布时间】：2020-04-18 06:47:38
【问题描述】：

我已经做了很多研究，但我无法弄清楚如何在标签徽章中输入百分比，如下图所示。

更新：我正在使用这个 laravel 包装器：https://github.com/ConsoleTVs/Charts 这也是我不想让观众感到困惑的原因。我只想知道选项的名称.. 我的代码是这样的：

$perTopicChart = (new AnsweredPerTopic);//->percentageInnerCutout(70);
    $perTopicChart->options([
        "events" => [],
        "legend" => [
            "labels" => [
                "defaultFontFamily" => "Tahoma",
                "fontSize" => 16,
            ],
            "position" => 'bottom'
        ],
        "cutoutPercentage" => 80,
        'tooltips' => [
            "show" => true
        ]
    ])->displayAxes(0);

    // put the labels (keys)
    $perTopicChart->labels($keys->map(function ($q) use ($perTopic) {
        $topic = Topic::find($q);
        $str = $topic->name;
        foreach ($perTopic as $key => $value) {
            if ($key == $q) {
                $str .= ' ' . round($value) . '%';
            }
        }
        return "topic name " . '-'. $topic->id;

    })->push('other'))
    ->options([]);
    // get random color 
    // $color = RandomColor::many(count($keys), array(
    //     'luminosity' => 'bright',
    //     'hue' => ['pink', 'green', 'orange'] // e.g. 'rgb(225,200,20)'
    //     ));
    $color = [
        "#38c172",
        "#9F9",
        "#Fa0",
        "pink",
        "red",
    ];

    $perTopicChart->dataset("Practice per Category", "doughnut", $values->map(function ($q) {
        return round($q);
    })->push($remainingPercenteg))
        ->backgroundColor($color)
        ->options([
            'borderWidth' => 2.5,
        ]);

第一张图片是当前结果，第二张是我想要的。提前致谢。

【问题讨论】：

你的代码是？你试过什么？你在输出中得到了什么？
感谢 kenny 提供反馈，我更新了问题，感谢任何帮助。
即使我为此进行了很多研究，也找不到任何东西，只是想到了 hack 之类的东西，而不是让 chartjs 绘制图例，我们应该将它绘制在我们身边。就像从图表 js 中获取图例的 html 并将其绘制在我们这边。这更像是一种黑客行为。如果你想要它的代码，我可以给你一个例子

标签： javascript php laravel chart.js

【解决方案1】：

即使我研究了很多，在chartjs库中也找不到这种行为的任何东西，所以想出一个hack。

Hack 类似于，不要让 chart js 绘制图例，而是我们只需从 chart js 库中获取图例的 HTML，并将其放入我们的容器中。通过这样做，我们可以完全访问传说，我们可以做任何我们想做的事情。

https://jsfiddle.net/1kxenzpr/

const data = [70, 30, 0];
debugger;
var ctx = document.getElementById("myChart").getContext('2d');
var chart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
    datasets: [{
      backgroundColor: [
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e"
      ],
      data: data
    }]
  },
  options: {
    legend: {
      display: false
    },
  }
});
var myLegendContainer = document.getElementById("legend");
myLegendContainer.innerHTML = chart.generateLegend();
var legendItems = myLegendContainer.getElementsByTagName('li');
for (var i = 0; i < legendItems.length; i++) {
  legendItems[i].querySelectorAll('span')[0].innerHTML = data[i] + '%'
}

.container {
  width: 80%;
  margin: 15px auto;
}

[class$="-legend"] {
  list-style: none;
  cursor: pointer;
  padding-left: 0;
}

[class$="-legend"] li {
  display: inline-block;
  padding: 0 5px;
}

[class$="-legend"] li.hidden {
  text-decoration: line-through;
}

[class$="-legend"] li span {
  display: inline-block;
  margin-right: 10px;
  width: 50px;
  font-size: 12px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

<div class="container">
  <div>
    <canvas id="myChart"></canvas>
    <div id="legend"></div>
  </div>
</div>

【讨论】：

感谢肯尼，它完成了这项工作并超越了和平。

【解决方案2】：

没办法（通过设置 X 或 Y）。你应该使用legendCallback： https://www.chartjs.org/docs/latest/configuration/legend.html#html-legends

一般来说，您的 Q 不遵循 StackOverflow 指南（这更像是一项任务，而不是 Q）。 https://stackoverflow.com/help/how-to-ask

无论如何，这是 +- 的想法（通过基本 JS 转换为 %）。要向前迈出这一步，您应该生成 full 生成 HTML 图例（将数字放入颜色 div 中）。相关：Custom Legend with ChartJS v2.0

var myData = [4, 9, 5];

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

/* get total */
const reducer = (accumulator, currentValue) => accumulator + currentValue;
var total = myData.reduce(reducer);

var options = {
  responsive: true,
  title: {
    text: 'Show % calucate on fly',
    position: 'top',
    display: true
  },
  legend: {
    display: true,
    labels: {
      /* 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];
            var current = data.datasets[0].data[i];
            var percentage =  ((current * 100) / total).toFixed(2) + '%'; 
            return {
              text: label + " | " + percentage,
              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/chart.js@2.8.0"></script>

【讨论】：