javascript - 设置高度时Chartjs条形图模糊

Question

我正在使用 chartjs 2.7.3，在设置包含画布的 div 的大小时出现问题，图像模糊且字母不可见，如下面的屏幕截图：

代码是：

<div class="stackedChartClass">
     <canvas #stackedChart></canvas>
</div>

let stackedChartOptions: any = {
  responsive: false,
  legend: {
    position: 'right' // place legend on the right side of chart
  },
  scales: {
    xAxes: [{
      stacked: true // this should be set to make the bars stacked
    }],
    yAxes: [{
      stacked: true // this also..
    }]
  }
}

this.stackedChart = new Chart(pieCtx,
  {
    type: 'bar',
    data: this.stackedChartData,
    options: stackedChartOptions,
    responsive: true
  }
);

和CSS

.stackedChartClass>canvas {
    width: 100% !important;
    height: 50vh !important;
}

如何解决这个问题？

标签： javascriptangularchart.js