如何创建带有锁定 y 轴的水平滚动 Chart.js 折线图? [英] How can I create a horizontal scrolling Chart.js line chart with a locked y axis?

问题描述

我想用 Chart.Js 创建一个折线图，但是当我滚动时 Y 轴 不会移动.

我假设我可以使用固定宽度，并将它放在带有 overflow:auto 的容器 div 中，但是 Y 轴 信息附加到画布并滚动.

我在文档中没有看到相关的参数或选项.有什么想法吗?

谢谢

解决方案

Chart.js 2.7.2: https://jsfiddle.net/EmmaLouise/eb1aqpx8/3/

此方法处理不同的 DPR 设置，并将缩放轴以匹配 Chart.js 应用于其图表的缩放比例.它还在 Chart.js 绘制的原始 Y 轴上调用 .clearRect() ，清除定义区域内的像素，这意味着没有重复的轴或重叠.

CSS:

.chartWrapper {位置:相对；}.chartWrapper >帆布 {位置:绝对；左:0；顶部:0；指针事件:无；}.chartAreaWrapper {宽度:600px；溢出-x:滚动；}

HTML

<div class="chartAreaWrapper"><div class="chartAreaWrapper2"><canvas id="chart-Test" height="300" width="1200"></canvas>

<canvas id="axis-Test" height="300" width="0"></canvas>

JS:

 $(function () {var rectangleSet = false;var canvasTest = $('#chart-Test');var chartTest = new Chart(canvasTest, {类型:'酒吧'，数据:图表数据，保持纵横比:假，响应:真实，选项: {工具提示:{标题字体大小:0，titleMarginBottom: 0,正文字体大小:12},传奇: {显示:假},尺度:{x轴:[{刻度:{字体大小:12，显示:假}}],y轴:[{刻度:{字体大小:12，beginAtZero: 真}}]},动画片: {onComplete: 函数 () {如果(！矩形集){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 * 比例；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');//标准化坐标系以使用 css 像素.sourceCtx.clearRect(0, 0, copyWidth * scale, copyHeight * scale);矩形集 = 真；}},onProgress:函数(){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);}}}}});

I'd like to create a line chart with Chart.Js but have the Y-Axis not move when I scroll.

I'm assuming I can use a fixed width, and put it in a container div with overflow:auto, but then The Y-axis info is attached to the canvas and scrolls along.

I don't see a parameter or option for this in the docs. Any ideas?

Thank you

解决方案

Chart.js 2.7.2: https://jsfiddle.net/EmmaLouise/eb1aqpx8/3/

This approach handles different DPR settings and will scale the axis to match the scaling that Chart.js applies to its charts. It also calls .clearRect() on the original Y axis that Chart.js draws, clearing the pixels in the defined area which means that there is no duplication of axes or overlaps.

CSS:

.chartWrapper {
 position: relative;
}

.chartWrapper > canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.chartAreaWrapper {
  width: 600px;
  overflow-x: scroll;
}

HTML

<div class="chartWrapper">
    <div class="chartAreaWrapper">
        <div class="chartAreaWrapper2">
          <canvas id="chart-Test" height="300" width="1200"></canvas>
        </div>
     </div>
     <canvas id="axis-Test" height="300" width="0"></canvas>
</div>

JS:

    $(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);
                    }
                }
            }
        }
    });

这篇关于如何创建带有锁定 y 轴的水平滚动 Chart.js 折线图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！