javascript - chart.js 图表以固定宽度扭曲

Question

我在一个容器内有一个 chart.js Canvas ，我给它一个固定的最小宽度，这样人们就可以在移动设备上滚动图表。

但是一旦容器具有固定宽度，图表就会变得越扭曲，屏幕越小。

在图表中，我已经尝试设置选项 responsive: true 和 maintainAspectRatio: false。这稍微解决了问题，但图表仍然失真。

Chart.js 选项:

var options = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
        stacked: false,
        gridLines: {
          display: true,
          color: "rgba(151,151,151,0.2)"
        }
      }],
      xAxes: [{
        gridLines: {
          display: true,
          color: "rgba(151,151,151,0.2)"
        }
      }]
    }
  };

HTML:

<div class="tds-chart-inner tds-hor-scroll">
 <canvas id="tds-chart-mem"></canvas>
</div>

CSS:

.tds-chart-inner {
 min-width: 850px !important;
}

.tds-hor-scroll {
 left: 0px;
 width: 100% !important;
 overflow-x: scroll;
}

canvas {
  left: 0px;
  height: 300px !important;
}

工作图表

扭曲的图表

Answer 1

对我来说，问题是图表为自己设置的高度比我自己设置的 Canvas 要大。

我的解决方案是:

1. 我删除了 Canvas 的所有高度设置(css 和标签属性)
2. 为 Canvas 创建容器标签并为其设置高度
3. 在图表选项中添加:

      responsive: true,
      maintainAspectRatio: false,

问题中的例子是在 css 中:

canvas {
  left: 0px;
  height: 300px !important;
}

我会把它改成:

.tds-hor-scroll {
	overflow-x: auto;
}
.tds-chart-inner {
  min-width: 850px;
  height: 300px;
}

<div class="tds-hor-scroll">
	<div class="tds-chart-inner">
	  <canvas id="tds-chart-mem"></canvas>
	</div>
</div>