gpt4 book ai didi

javascript - 如何创建具有锁定 y 轴的水平滚动 Chart.js 折线图?

转载 作者:行者123 更新时间:2023-12-03 00:47:59 24 4
gpt4 key购买 nike

我想使用 Chart.Js 创建折线图,但滚动时 Y 轴 不会移动。

我假设我可以使用固定宽度,并将其放入带有 overflow:auto 的容器 div 中,但随后将 Y 轴 信息附加到 Canvas 并滚动。

我在文档中没有看到这方面的参数或选项。有什么想法吗?

谢谢

最佳答案

可滚动图表

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

<小时/>

预览

enter image description here

<小时/>

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);
}
});
<小时/>

fiddle - http://jsfiddle.net/mbhavfwm/

关于javascript - 如何创建具有锁定 y 轴的水平滚动 Chart.js 折线图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35854244/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com