当图表水平滚动时保持 Y 轴固定，无论 DPI 设置如何?

Question

我在SO上找到了一些解决方案，以将Y轴固定在水平滚动的图表上。不幸的是，它们中的很多都不适用于 Chart.js 2.x.x 及更高版本，或者我发现当查看图表的设备具有 DPI 设置为 96 DPI>时它们会中断，这对我来说是一个交易破坏者，因为我会有这样的设备访问我的网站使用 Chart.js。

我目前最好的解决方案是使用动画 - 完成和进度选项 - https://jsfiddle.net/EmmaLouise/vcbg0jdn/1/。

maintainAspectRatio: false,
responsive: true,
options: {
tooltips: {
titleFontSize: 0,
titleMarginBottom: 0,
bodyFontSize: 12
},
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
fontSize: 12,
display: false
}
}],
yAxes: [{
ticks: {
fontSize: 12,
beginAtZero: true
}
}]
},
animation: {
onComplete: function () {
if (!rectangleSet) {
var sourceCanvas = chartTest.chart.canvas;
var copyWidth = chartTest.scales['y-axis-0'].width;
var copyHeight = chartTest.scales['y-axis-0'].height + chartTest.scales['y-axis-0'].top + 10;
var targetCtx = document.getElementById("axis-Test").getContext("2d");
targetCtx.canvas.width = copyWidth;
targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);
var sourceCtx = sourceCanvas.getContext('2d');
sourceCtx.clearRect(0, 0, copyWidth, copyHeight);
rectangleSet = true;
}
},
onProgress: function () {
if (rectangleSet === true) {
var copyWidth = chartTest.scales['y-axis-0'].width;
var copyHeight = chartTest.scales['y-axis-0'].height + chartTest.scales['y-axis-0'].top + 10;
var sourceCtx = chartTest.chart.canvas.getContext('2d');
sourceCtx.clearRect(0, 0, copyWidth, copyHeight);
}
}
}
}

但是，如果可以的话，我仍在尝试如何使用 DPI 设置来扩展它。

我发现很难相信拥有固定轴的唯一方法是使用动画解决方法，但这是我在过去几天在线研究中所能找到的全部内容。

是否有其他人设法以更简单的方式实现这一目标，或解决了DPI问题？诚然，我对使用Chart.js很陌生，所以我可能走错了。

Answer 1

我最终找到了解决方案。问题是图表本身被正确缩放以匹配设备的 DPR，但被动画化的轴却没有。

自己缩放轴解决了问题 - https://jsfiddle.net/EmmaLouise/eb1aqpx8/3/：

var scale = window.devicePixelRatio;                       
var sourceCanvas = chartTest.chart.canvas;
var copyWidth = chartTest.scales['y-axis-0'].width - 10;
var copyHeight = chartTest.scales['y-axis-0'].height + chartTest.scales['y-axis-0'].top + 10;
var targetCtx = document.getElementById("axis-Test").getContext("2d");
targetCtx.scale(scale, scale);
targetCtx.canvas.width = copyWidth * scale;
targetCtx.canvas.height = copyHeight * scale;
targetCtx.canvas.style.width = `${copyWidth}px`;
targetCtx.canvas.style.height = `${copyHeight}px`;
targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth * scale, copyHeight * scale, 0, 0, copyWidth * scale, copyHeight * scale);
var sourceCtx = sourceCanvas.getContext('2d');
// Normalize coordinate system to use css pixels.
sourceCtx.clearRect(0, 0, copyWidth * scale, copyHeight * scale);
rectangleSet = true;