javascript - 在chartJS和Angular上水平滚动时，使y轴变粘(Make y-axis sticky when having horizontal scroll on chartJS and Angular)

Question

I would like to fix y-axis position when scrolling horizontally.

(我想在水平滚动时固定y轴位置。)

Here's an example that works but without using Angular

(这是一个有效但不使用Angular的示例)

 $(document).ready(function () { function generateLabels() { var chartLabels = []; for (x = 0; x < 100; x++) { chartLabels.push("Label" + x); } return chartLabels; } function generateData() { var chartData = []; for (x = 0; x < 100; x++) { chartData.push(Math.floor((Math.random() * 100) + 1)); } return chartData; } function addData(numData, chart) { for (var i = 0; i < numData; i++) { chart.data.datasets[0].data.push(Math.random() * 100); chart.data.labels.push("Label" + i); var newwidth = $('.chartAreaWrapper2').width() + 60; $('.chartAreaWrapper2').width(newwidth); } } var chartData = { labels: generateLabels(), datasets: [{ label: "Test Data Set", data: generateData() }] }; $(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 sourceCanvas = chartTest.chart.canvas; var copyWidth = chartTest.scales['y-axis-0'].width; var copyHeight = chartTest.scales['y-axis-0'].height + chartTest.scales['y-axis-0'].top + 10; var targetCtx = document.getElementById("axis-Test").getContext("2d"); targetCtx.canvas.width = copyWidth; targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight); var sourceCtx = sourceCanvas.getContext('2d'); sourceCtx.clearRect(0, 0, copyWidth, copyHeight); 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); } } } } }); addData(5, chartTest); }); }); 

 .chartWrapper { position: relative; } .chartWrapper > canvas { position: absolute; left: 0; top: 0; pointer-events: none; } .chartAreaWrapper { width: 600px; overflow-x: scroll; } 

 <script src="https://github.com/chartjs/Chart.js/releases/download/v2.6.0/Chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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> 

When I use this in my angular example , it does not work anymore, the axis does not follow the scroll

(当我在角度示例中使用它时，它不再起作用，轴不再跟随滚动)

Here's a stackblitz reproduction

(这是堆积如山的复制品)

  ask by infodev translate from so

Answer 1

等待大神答复