Scroll Chart.js V2.7.2如何在不松开Y轴的情况下制作水平滚动条
我看到了一些解决方案,但它们在v2.7.2中不起作用Scroll Chart.js V2.7.2如何在不松开Y轴的情况下制作水平滚动条,scroll,chart.js,Scroll,Chart.js,我看到了一些解决方案,但它们在v2.7.2中不起作用 有没有不使用动画的方法-制作静态Y轴并水平滚动恐怕我还没有找到不使用动画的方法来实现这一点。然而,我已经找到了一个在Chart.js 2.7.2中有效的解决方案 此方法处理不同的DPR设置,并将缩放轴以匹配Chart.js应用于其图表的缩放。它还对Chart.js绘制的原始Y轴调用.clearRect(),清除定义区域中的像素,这意味着没有轴的重复或重叠 CSS: .chartWrapper { position: relative; }
有没有不使用动画的方法-制作静态Y轴并水平滚动恐怕我还没有找到不使用动画的方法来实现这一点。然而,我已经找到了一个在Chart.js 2.7.2中有效的解决方案 此方法处理不同的DPR设置,并将缩放轴以匹配Chart.js应用于其图表的缩放。它还对Chart.js绘制的原始Y轴调用.clearRect(),清除定义区域中的像素,这意味着没有轴的重复或重叠 CSS:
.chartWrapper {
position: relative;
}
.chartWrapper > canvas {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.chartAreaWrapper {
width: 600px;
overflow-x: scroll;
}
$(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);
}
}
}
}
});
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>
恐怕我还没有找到一种不使用动画就能实现这一点的方法。然而,我已经找到了一个在Chart.js 2.7.2中有效的解决方案 此方法处理不同的DPR设置,并将缩放轴以匹配Chart.js应用于其图表的缩放。它还对Chart.js绘制的原始Y轴调用.clearRect(),清除定义区域中的像素,这意味着没有轴的重复或重叠 CSS:
.chartWrapper {
position: relative;
}
.chartWrapper > canvas {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.chartAreaWrapper {
width: 600px;
overflow-x: scroll;
}
$(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);
}
}
}
}
});
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>
我使用的是图表v2.7.2,希望有水平滚动。这个版本有什么解决方案吗?我有大约20到30个基于数据动态生成的刻度点。我只想在X轴上显示10个标签,其余的只在滚动时显示。有什么解决办法吗?我无法控制滴答声。当我说:5。它应该只显示5个刻度点吗?我使用的是图表v2.7.2,希望有水平滚动。这个版本有什么解决方案吗?我有大约20到30个基于数据动态生成的刻度点。我只想在X轴上显示10个标签,其余的只在滚动时显示。有什么解决办法吗?我无法控制滴答声。当我说:5。它应该只显示5个刻度点吗?我试过你的代码,但它没有显示任何水平滚动条,无法滚动我试过你的代码,但它没有显示任何水平滚动条,无法滚动