使用chart.js显示连接到标签的计数

xurqigkl  于 2022-11-07  发布在  Chart.js
关注(0)|答案(2)|浏览(225)

我正在使用Chart.js来构造饼图,有没有办法将Count连接到标签(在饼图图例中显示数字和百分比)?

  1. createChart : function() {
  2. debugger;
  3. var chartData = [60, 90, 120, 150];
  4. var chartLabels = ['apples','bananas','oranges','pears'];
  5. var chartCanvas = component.find("chart").getElement();
  6. var chart = new Chart(chartCanvas, {
  7. type: 'pie',
  8. data: {
  9. labels: chartLabels,
  10. datasets: [
  11. {
  12. label: "test",
  13. data: chartData,
  14. borderWidth: 0,
  15. backgroundColor: [
  16. "#f43004",
  17. "#decf3f",
  18. "#FFA500"
  19. ]
  20. }
  21. ]
  22. },
  23. options: {
  24. cutoutPercentage: 1,
  25. maintainAspectRatio: false,
  26. legend: {
  27. display: true,
  28. position:'right',
  29. fullWidth:false,
  30. reverse:true,
  31. labels: {
  32. fontColor: '#000',
  33. fontSize:10,
  34. fontFamily:"Arial, sans-serif SANS_SERIF"
  35. },
  36. layout: {
  37. padding: 70,
  38. }
  39. }
  40. }
  41. });
  42. }

我试图构造这样的图表:

请提供任何建议或指针来实现这一点。
先谢谢你了。

qyzbxkaa

qyzbxkaa1#

您可以使用html-legends功能,以便自定义Chart.js图例:

  1. legendCallback : function (chart) {
  2. var text = [];
  3. text.push('<ul class="0-legend">');
  4. var ds = chart.data.datasets[0];
  5. var sum = ds.data.reduce(function add(a, b) {
  6. return a + b;
  7. }, 0);
  8. for (var i = 0; i < ds.data.length; i++) {
  9. text.push('<li>');
  10. var perc = Math.round(100 * ds.data[i] / sum, 0);
  11. text.push('<span style="background-color:' + ds.backgroundColor[i] + '">' + '</span>' + chart.data.labels[i] + ' (' + ds.data[i] + ') (' + perc + '%)');
  12. text.push('</li>');
  13. }
  14. text.push('</ul>');
  15. return text.join("");
  16. }

这里有一把小提琴:https://jsfiddle.net/beaver71/b5hdn9gw/
第一个

展开查看全部
sg3maiej

sg3maiej2#

第一个

相关问题