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

Question

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

的网站

目前我最好的解决方案是使用动画 - onComplete 和 onProgress 选项 - 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;

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

Keep the Y axis fixed when the chart scrolls horizontally, regardless of DPI settings?

javascript

chart.js

chart.js2