Question

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

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>

我的小提琴：https://jsfiddle.net/1u7t6rfo/1/

是否可以对齐多个Chart.js图表？

Answer 1

您可以简单地为Y轴设置最大值。例如

var maxY = 100;

....

scales: {
    yAxes: [{
        id: 'A',
        type: 'linear',
        ticks: {
            .....
            max: maxY
        },
    }]
    ....
}

此处是代码段：

https://jsfiddle.net/Lx9unv47/

如果您不想手动设置Y轴的最大值，也可以执行以下操作：

var allValues = data.datasets[0].data.concat(data2.datasets[0].data);
var maxY = Math.max(...allValues);

这里是小提琴：https://jsfiddle.net/r6jgLmns/

Answer 2

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

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

将Chart.js y轴水平对齐

2 个答案: