时间戳

首页 > 解决方案 > 将百分比添加到标签徽章 - donut chart.js

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

问题描述

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

更新：我正在使用这个 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,
        ]);

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

当前结果 我想要达到的目标

标签： javascriptphplaravelchart.js

解决方案

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

Hack 类似于，不要让图表 js 绘制图例，而是我们只需从图表 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>

推荐阅读