ChartJS条形图太短

kjthegm6  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(529)

我希望图表更大,而不考虑值。当前,图表的高度是图片中的高度,并且不会更改。这是我当前拥有的图表的完整配置。是否可以让图表具有更大的高度,而不考虑数据集值?

  1. const KYCctx = document.getElementById('kycChart').getContext('2d');
  2. const KYCChart = new Chart(KYCctx, {
  3. type: 'bar',
  4. data: {
  5. labels: ["Approved", "Denied", "Pending"],
  6. datasets: [{
  7. data: [65, 59, 80],
  8. backgroundColor: [
  9. 'rgba(203, 55, 55, 0.2)',
  10. ' rgba(39, 187, 101, 0.5)',
  11. 'rgba(255, 171, 45, 0.1)'
  12. ],
  13. borderColor: [
  14. ' rgba(203, 55, 55, 1)',
  15. 'rgba(34, 195, 107, 1)',
  16. 'rgba(255, 171, 45, 1)'
  17. ],
  18. borderWidth: 1
  19. }]
  20. },
  21. options: {
  22. responsive: true,
  23. scales: {
  24. y: {
  25. beginAtZero: true,
  26. grid: {
  27. color: 'rgb(33,34,37)'
  28. }
  29. }
  30. },
  31. plugins: {
  32. legend: {
  33. position: 'bottom',
  34. labels: {
  35. usePointStyle: true,
  36. pointStyle: 'circle',
  37. boxWidth: 6,
  38. generateLabels: (chart) => {
  39. console.log(chart);
  40. return chart.data.labels.map(
  41. (label, index) => ({
  42. text: label,
  43. fillStyle: chart.data.datasets[0].backgroundColor[index],
  44. strokeStyle: chart.data.datasets[0].backgroundColor[index],
  45. }
  46. )
  47. )
  48. }
  49. }
  50. },
  51. title: {
  52. display: true,
  53. align: "start",
  54. color: "#ffff",
  55. font: {
  56. size: 18,
  57. weight: 700,
  58. lineHeight: 2
  59. },
  60. padding: {
  61. bottom: 20
  62. }
  63. }
  64. }
  65. }
  66. });
nbnkbykc

nbnkbykc1#

您可以在canvas上明确定义height

  1. <canvas id="kycChart" height="400"></canvas>

第一个

相关问题