javascript - Chartjs 未显示实际值（值正在调整大小）

Question

当我创建一个包含一些值的图表时，这些值正在调整大小，我不知道为什么。以下是预期图表和显示的现实的图像：

预期的：

现实：

• 数据中的值相同
• 每次我重新加载页面时，图表中的值都会不同
• 有时图形甚至没有出现

以下是我在创建图表时的选项：

var defaultOptions = {
  legend: {
    position: 'bottom',
    labels: {
      usePointStyle: true,
      fill: true
    }
  },
  scales: {
    xAxes: [{
      ticks: {
        min: 0,
        max: 100
      }
    }],
    yAxes: [{
      ticks: {
        callback: function(value, index, values) {
          try {
            value = generateMultilineText(value.replace(/"/g, '"'), 50, 1);
          } catch (e) {
            console.log('erro - callback ticks');
          }
          return value;
        }
      }
    }]
  },
  layout: {
    padding: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    }
  },
};

图表的创建：

$('#allCanvas').append(`<canvas id="generalChart-1" style="width: 100% !important; max-width: 800px;"></canvas>`);

$(`#generalChart-1`)[0].height = 300;

let chart = new Chart($(`#generalChart-1`)[0].getContext('2d'), {
  type: 'horizontalBar',
  data: {
    labels: tLabels,
    datasets: [{
      label: "Percentual atual",
      data: tData,
      backgroundColor: formatNumberToColor(tData)
    }]
  },
  options: defaultOptions
});

标签： javascripthtmlcanvaschart.js