如何使条形图和散点图出现在彼此下方？

Question

在图表 js 中，是否可以让每个条形正好位于每个散点下方？在下面的图片中，第一张正确，第二张不正确。

您可以在此处查看演示 demo

有什么帮助吗？

Answer 1

您可以根据具体情况进行。问题是两个图表都有不同的 xAxis 类型 (linear and category)。 yAxis 标签的长度也不同。

要解决演示图表中的问题，您可以按如下方式更改散点图中的选项。

Define option scales.xAxes.offset: true to make it correspond to the default value defined for bar charts.

Add min and max to scales.xAxes.ticks to horizontally adjust the points with the bars.

scales: {
   xAxes: [{
       offset: true, 
       gridLines: {
         display: false
       },
       ticks: {
         min: -0.2, 
         max: 3.3,

请看看你的amended Demo。

如何使条形图和散点图出现在彼此下方？

How to make bar charts and scatter dots appear underneath each other?

reactjs

chart.js

react-chartjs