Chart.js收缩

klsxnrf1  于 2023-03-12  发布在  Chart.js
关注(0)|答案(1)|浏览(217)

使用chart.js时出现了一个新问题。我的图表开始神秘地缩小到什么都没有。看起来像是chart.js中引入的一个新错误。这种缩小效果显然不是有意或想要的。

  1. var scanCountChart = new Chart("ScanCountChart", {
  2. type: "bar",
  3. data: {
  4. labels: xVals,
  5. datasets: [{
  6. backgroundColor: barColors,
  7. data: yVals
  8. }]
  9. },
  10. options: {
  11. plugins: {
  12. tooltip: {
  13. titleFont: {
  14. size: 50
  15. },
  16. bodyFont: {
  17. size: 30
  18. },
  19. footerFont: {
  20. size: 15 // there is no footer by default
  21. }
  22. },
  23. legend: { display: false },
  24. zoom: {
  25. limits: {
  26. y: { min: 0, max: 100 },
  27. y2: { min: -5, max: 5 }
  28. },
  29. }
  30. },
  31. scales: {
  32. x: {
  33. ticks: {
  34. font: {
  35. size: xFontSize
  36. },
  37. maxRotation: 45,
  38. minRotation: 25
  39. }
  40. },
  41. y: {
  42. ticks: {
  43. font: {
  44. size: yFontSize
  45. }
  46. }
  47. }
  48. }
  49. }
  50. });
b4qexyjb

b4qexyjb1#

回答自己的问题。解决方案似乎是添加maintainAspectRatio:错。

  1. var scanCountChart = new Chart("ScanCountChart", {
  2. type: "bar",
  3. data: {
  4. labels: xVals,
  5. datasets: [{
  6. backgroundColor: barColors,
  7. data: yVals
  8. }]
  9. },
  10. options: {
  11. maintainAspectRatio: false, // *** Important : this is required or a strange vanishing zoom out effect occurs with the graph.
  12. plugins: {
  13. tooltip: {
  14. titleFont: {
  15. size: 50
  16. },
  17. bodyFont: {
  18. size: 30
  19. },
  20. footerFont: {
  21. size: 15 // there is no footer by default
  22. }
  23. },
  24. legend: { display: false },
  25. zoom: {
  26. limits: {
  27. y: { min: 0, max: 100 },
  28. y2: { min: -5, max: 5 }
  29. },
  30. }
  31. },
  32. scales: {
  33. x: {
  34. ticks: {
  35. font: {
  36. size: xFontSize
  37. },
  38. maxRotation: 45,
  39. minRotation: 25
  40. }
  41. },
  42. y: {
  43. ticks: {
  44. font: {
  45. size: yFontSize
  46. }
  47. }
  48. }
  49. }
  50. }
  51. });
展开查看全部

相关问题