Chart.js总是增加图表上的高度,resize()

u5rb5r59  于 2022-11-06  发布在  Chart.js
关注(0)|答案(4)|浏览(283)

我在addData和removeData函数中添加了chart.resize(),但是它总是增加高度,而且从来没有减少!
当用户点击菜单项时,我正在更新图表。有些项有100多个数据,有些项只有2个数据,当数据很少时,图表总是在增加高度:
horizontalBar
为什么会发生这种情况?

  1. <canvas id="chart"></canvas>
  2. var chartData = {
  3. labels: [<?php echo '"'.implode('","', $chart_labels ).'"' ?>],
  4. datasets: [
  5. {
  6. data: [<?php echo implode(',', $chart_numbers ) ?>],
  7. backgroundColor: '#184b8f',
  8. hoverBackgroundColor: '#ef3e42'
  9. }
  10. ]
  11. };
  12. var barOptions = {
  13. responsive: true,
  14. maintainAspectRatio: false,
  15. tooltips: {
  16. enabled: false
  17. },
  18. hover: {
  19. animationDuration: 0
  20. },
  21. legend: {
  22. display: false
  23. },
  24. scales : {
  25. xAxes : [{
  26. gridLines : {
  27. display: false
  28. },
  29. ticks: {
  30. beginAtZero: true,
  31. color: '#cfcfcf'
  32. }
  33. } ],
  34. yAxes : [ {
  35. gridLines : {
  36. display: false
  37. },
  38. ticks: {
  39. fontSize: 13,
  40. fontFamily: "'Open Sans'",
  41. fontWeight: 600,
  42. }
  43. }]
  44. },
  45. animation: {
  46. duration: 500,
  47. easing: "easeOutQuart",
  48. }
  49. };
  50. function removeData(chart) {
  51. chart.data.labels.pop();
  52. chart.data.datasets.forEach((dataset) => {
  53. dataset.data.pop();
  54. });
  55. chart.resize();
  56. chart.update();
  57. }
  58. function addData(chart, label, data) {
  59. chart.data.labels.push(label);
  60. chart.data.datasets.forEach((dataset) => {
  61. dataset.data.push(data);
  62. });
  63. chart.resize();
  64. chart.update();
  65. }
  66. var ctx = document.getElementById("chart").getContext("2d");
  67. var myBar = new Chart(ctx, {
  68. type: 'horizontalBar',
  69. data: chartData,
  70. options: barOptions
  71. });
sq1bmfud

sq1bmfud1#

我也有过同样的经历。你必须在画布周围放一个空的div。

mitkmikd

mitkmikd2#

我发现一些用户在此帖子中遇到了同样的问题:https://github.com/jtblin/angular-chart.js/issues/84
我的解决方案是将图表的选项更改为maintainAspectRatio:错误

  1. myChart.setOptions({
  2. responsive: true,
  3. maintainAspectRatio: false
  4. });
cnwbcb6i

cnwbcb6i3#

在laravel livewire中,修复了将wire:ignore添加到 Package 器div

  1. <div wire:ignore>
  2. <div class="chart-container" style="height: 80vh; width: 80vh;">
  3. <canvas id="bar-chart" height="800" width="1500"></canvas>
  4. </div>
  5. </div>
bvk5enib

bvk5enib4#

我在布尔玛瓷砖上也遇到了同样的问题。
修复方法是在Chart.js脚本选项区域中设置responsive: false

相关问题