我有一个3 y轴的水平滚动图。
使用这个问题How can I create a horizontal scrolling Chart.js line chart with a locked y axis? 和这个小提琴https://jsfiddle.net/EmmaLouise/eb1aqpx8/3/
我设法使1个y轴保持静态，但我需要使它们全部保持静态。
我假设，如果我用不同的画布比例ID复制相同的代码3次，我将得到三个静态比例。但这正在发生。到目前为止，这是我尝试过的
// here's the html part
<div id="lineChartContainer" class="lineChartContainer">
<h1 class="is-size-4 has-text-centered has-text-weight-bold">Power Analysis</h1>
<div class="lineChartContainer1" id="lineChartContainer1">
<div class="lineChartContainer2" id="lineChartContainer2">
// the chart canvas
<canvas id="lineChartcanvas"></canvas>
</div>
</div>
// the canvas for the three y-axis
<canvas id="myChartAxisVoltage" height="463px" width="0"></canvas>
<canvas id="myChartAxisAmpere" height="463px" width="0"></canvas>
<canvas id="myChartAxisWatt" height="463px" width="0"></canvas>
<div id="legend"></div>
</div>
// this is the chart.js part written in "option" parameter
animation: {
onComplete: function () {
// debugger;
if (!rectangleSet) {
var scale = window.devicePixelRatio;
var ampereSourceCanvas = chart.chart.canvas;
var voltageSourceCanvas = chart.chart.canvas;
var wattSourceCanvas = chart.chart.canvas;
// Ampere Scale draw
var ampereScaleWidth = chart.scales['ampere'].width - 10;
var ampereScaleHeight = chart.scales['ampere'].height + chart.scales['ampere'].top + 10;
var ampereTargetCtx = document.getElementById("myChartAxisAmpere").getContext("2d");
ampereTargetCtx.scale(scale, scale);
ampereTargetCtx.canvas.width = ampereScaleWidth * scale;
ampereTargetCtx.canvas.height = ampereScaleHeight * scale;
ampereTargetCtx.canvas.style.width = `${ampereScaleWidth}px`;
ampereTargetCtx.canvas.style.height = `${ampereScaleHeight}px`;
ampereTargetCtx.drawImage(ampereSourceCanvas, 0, 0, ampereScaleWidth * scale, ampereScaleHeight * scale, 0, 37, ampereScaleWidth * scale, ampereScaleHeight * scale);
var ampereSourceCtx = ampereSourceCanvas.getContext('2d');
// Normalize coordinate system to use css pixels.
ampereSourceCtx.clearRect(0, 0, ampereScaleWidth * scale, ampereScaleHeight * scale);
// Voltage Scale draw
var voltageScaleWidth = chart.scales['volt'].width - 10;
var voltageScaleHeight = chart.scales['volt'].height + chart.scales['volt'].top + 10;
var voltageTargetCtx = document.getElementById("myChartAxisVoltage").getContext("2d");
voltageTargetCtx.scale(scale, scale);
voltageTargetCtx.canvas.width = voltageScaleWidth * scale;
voltageTargetCtx.canvas.height = voltageScaleHeight * scale;
voltageTargetCtx.canvas.style.width = `${voltageScaleWidth}px`;
voltageTargetCtx.canvas.style.height = `${voltageScaleHeight}px`;
voltageTargetCtx.drawImage(voltageSourceCanvas, 0, 0, voltageScaleWidth * scale, voltageScaleHeight * scale, 0, 37, voltageScaleWidth * scale, voltageScaleHeight * scale);
var voltageSourceCtx = voltageSourceCanvas.getContext('2d');
// Normalize coordinate system to use css pixels.
voltageSourceCtx.clearRect(0, 0, voltageScaleWidth * scale, voltageScaleHeight * scale);
// Watts Scale draw
var wattScaleWidth = chart.scales['volt'].width - 10;
var wattScaleHeight = chart.scales['volt'].height + chart.scales['volt'].top + 10;
var wattTargetCtx = document.getElementById("myChartAxisWatt").getContext("2d");
wattTargetCtx.scale(scale, scale);
wattTargetCtx.canvas.width = wattScaleWidth * scale;
wattTargetCtx.canvas.height = wattScaleHeight * scale;
wattTargetCtx.canvas.style.width = `${wattScaleWidth}px`;
wattTargetCtx.canvas.style.height = `${wattScaleHeight}px`;
wattTargetCtx.drawImage(wattSourceCanvas, 0, 0, wattScaleWidth * scale, wattScaleHeight * scale, 0, 37, wattScaleWidth * scale, wattScaleHeight * scale);
var wattSourceCtx = wattSourceCanvas.getContext('2d');
// Normalize coordinate system to use css pixels.
wattSourceCtx.clearRect(0, 0, wattScaleWidth * scale, wattScaleHeight * scale);
rectangleSet = true;
}
},
onProgress: function () {
if (rectangleSet === true) {
// Ampere Scale draw
var ampereScaleWidth = chart.scales['ampere'].width;
var ampereScaleHeight = chart.scales['ampere'].height + chart.scales['ampere'].top + 10;
var ampereSourceCtx = chart.chart.canvas.getContext('2d');
ampereSourceCtx.clearRect(0, 0, ampereScaleWidth, ampereScaleHeight);
// Voltage Scale draw
var voltageScaleWidth = chart.scales['volt'].width;
var voltageScaleHeight = chart.scales['volt'].height + chart.scales['volt'].top + 10;
var voltageSourceCtx = chart.chart.canvas.getContext('2d');
voltageSourceCtx.clearRect(0, 0, voltageScaleWidth, voltageScaleHeight);
// Watts Scale draw
var wattScaleWidth = chart.scales['watt'].width;
var wattScaleHeight = chart.scales['watt'].height + chart.scales['watt'].top + 10;
var wattSourceCtx = chart.chart.canvas.getContext('2d');
wattSourceCtx.clearRect(0, 0, wattScaleWidth, wattScaleHeight);
}
}
},
现在，当我运行代码时，会发生一些奇怪的事情：