gpt4 book ai didi

javascript - 水平对齐 Chart.js y 轴

转载 作者:行者123 更新时间:2023-11-27 23:54:12 24 4
gpt4 key购买 nike

我的文档中有两个(或更多)Charts.js 图表。由于 y 轴刻度并不总是相同的宽度,因此 y 轴彼此未对齐。

enter image description here

html:

<body>
<div class="mainContainer">
<div class="mainSubContainer" id="main">
<div class="graphContainer">
<div class="graphHeader">Temperatur</div>
<div class="graphElement"><canvas id="canvas1"></canvas></div>
</div>
<div class="graphContainer">
<div class="graphHeader">relative Luftfeuchte</div>
<div class="graphElement"><canvas id="canvas2"></canvas></div>
</div>
</div>
</div>
</body>

我的 fiddle :https://jsfiddle.net/1u7t6rfo/1/

有没有办法对齐多个 Chart.js 图表?

最佳答案

您可以将两个图上的轴的宽度设置为相同

  scales: {
yAxes: [
{
id: 'y-axis-1',
afterUpdate: function(scale) {
scale.width = 100 // Set this value to be the same on both graphs
},
},
],
}

关于javascript - 水平对齐 Chart.js y 轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56359430/

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