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

问题描述

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

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

我假设我可以使用固定宽度，并将其放在容器div中 overflow：auto ，但随后 Y轴信息附加到画布并滚动。

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?

谢谢

推荐答案

可滚动图表

你几乎走在正确的轨道上。如果你添加了另一个包装器和y轴，你就完成了。

Scrollable Chart

You're pretty much on the right track. If you add another wrapper and the y axis you are done.

预览

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">
        <canvas id="myChart" height="300" width="1200"></canvas>
    </div>
    <canvas id="myChartAxis" height="300" width="0"></canvas>
</div>

脚本

...

new Chart(ctx).Line(data, {
    onAnimationComplete: function () {
        var sourceCanvas = this.chart.ctx.canvas;
        // the -5 is so that we don't copy the edges of the line
        var copyWidth = this.scale.xScalePaddingLeft - 5;
        // the +5 is so that the bottommost y axis label is not clipped off
        // we could factor this in using measureText if we wanted to be generic
        var copyHeight = this.scale.endPoint + 5;
        var targetCtx = document.getElementById("myChartAxis").getContext("2d");
        targetCtx.canvas.width = copyWidth;
        targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);
    }
});

---

小提琴 - http://jsfiddle.net/mbhavfwm/

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