带有chart.js 2.1.4的可滚动x轴

Question

我有一个包含很多点的折线图要绘制
我希望 x 轴可以滚动

我已经看过很少的solutions，但他们正在使用旧版本的图表 js 提供解决方案。

chart.js 版本 2 中是否有任何选项可以获取可滚动的 x 轴？
以及
如何在 chart.js 版本 2 中获取 y 轴内容的宽度？
如果没有直接选项来获取可滚动的 x 轴，我可以在 Y 轴区域复制内容并在其他画布中绘制图像。

Answer 1

我对相关问题的回答将对您有所帮助。在我的示例中，我使 Y 轴可滚动，但这也可以很容易地应用于 X 轴。

https://stackoverflow.com/a/51282003/10060003

JS 小提琴 - https://jsfiddle.net/EmmaLouise/eb1aqpx8/3/

我正在使用动画 onComplete 和 onProgress 选项来重绘要随图表滚动的轴。 （见https://www.chartjs.org/docs/latest/configuration/animations.html）。

$(function () {
    var rectangleSet = false;

    var canvasTest = $('#chart-Test');
    var chartTest = new Chart(canvasTest, {
        type: 'bar',
        data: chartData,
        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 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;
                    }
                },
                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);
                    }
                }
            }
        }
    });