Chartjs图例即使设置为true也不可见

gstyhher  于 2023-08-05  发布在  Chart.js
关注(0)|答案(1)|浏览(234)

我对chartJS相当陌生,我正在寻找一种在我的甜甜圈图表上显示标签的方法。我尝试在选项中将图例的可见性设置为true,但仍然不起作用。

  1. var data = [{
  2. data: [successfulBuildsCount, failureBuildsCount],
  3. labels: ["Successes", "Failures"],
  4. backgroundColor: [
  5. "green",
  6. "red"
  7. ],
  8. borderColor: "#fff"
  9. }];
  10. var options = {
  11. legend: { display: true, },
  12. title: {
  13. display: true,
  14. },
  15. plugins: {
  16. datalabels: {
  17. formatter: (value, ctx) => {
  18. let sum = 0;
  19. let dataArr = ctx.chart.data.datasets[0].data;
  20. dataArr.map(data => {
  21. sum += data;
  22. });
  23. let percentage = (value * 100 / sum).toFixed(2) + "%";
  24. return percentage;
  25. },
  26. color: '#fff',
  27. }
  28. }
  29. };
  30. var ctx = document.getElementById("chartContainer");
  31. var myChart = new Chart(ctx, {
  32. type: 'doughnut',
  33. data: {
  34. datasets: data
  35. },
  36. options: options
  37. });

字符串

fdx2calv

fdx2calv1#

默认情况下应显示图例。如果它没有显示,我假设你正在使用treeshaking,而不是像这样导入和注册图例插件:

  1. import { Chart, Legend } from 'chart.js';
  2. Chart.register(Legend);

字符串
或者你可以让chart.js导入并注册所有内容,以确保不会遗漏任何内容:

  1. import Chart from 'chart.js/auto';

相关问题