如何在chart.js中的两个图表上对齐垂直轴区域答案

【问题标题】：How to align vertical axis area on two charts in chart.js如何在chart.js中的两个图表上对齐垂直轴区域
【发布时间】：2021-09-06 05:50:45
【问题描述】：

在 chart.js 中，我希望有 2 个图表（一个在另一个之下），并同步了刻度。目前看起来如此

如您所见，日期未对齐。在这里设置相同的最小值-最大值是不可能的，因为值相差太大。

我认为解决方案是将两个 y 轴的宽度设置为相等。上图的第二个 y 轴使情况变得复杂，但是否可以在下图中放置一个空的右刻度？

我目前对顶部图表的选择是

    options: {
      tooltips: {
          enabled: true,
          trigger: 'axis',
          intersect: false,
          mode : 'index'
      },        
      responsive: true,
      maintainAspectRatio: false,
      layout: {
        padding: {
          // left: 500,
          right: 0,
          top: 0,
          bottom: 0,
        },
      },
      scales: {
        xAxes: [
          {
            boundaryGap : false,
            gridLines: {
              display: false,
            },
            ticks: {
                // Include a dollar sign in the ticks
                callback: function(value, index, values) {
                    return  value.split('.').slice(0,2).join('.');
                }
            },          
          },
        ],
       yAxes: [
          {
            id: keys[0],
            position: "left",
            gridLines: {
              drawBorder: false,
              zeroLineColor: "rgba(147, 147, 147, 0.2)",
              color: "rgba(147, 147, 147, 0.2)",
            },
            ticks: {
              padding: 20,
              fontColor: "#2C71C3",
              beginAtZero: false,
            },
          },  {
            id: keys[1],
            position: "right",
            gridLines: {
              drawBorder: false,
              color: "rgba(147, 147, 147, 0)",
            },
            ticks: {
              padding: 20,
              fontColor: "#C6C6C6",
              beginAtZero: false,
            },
          },  
        ],
      },

对于底部的一个

    options: {
      tooltips: {
          enabled: true,
          trigger: 'axis',
          intersect: false,
          mode : 'index'
      },        
      responsive: true,
      maintainAspectRatio: false,
      layout: {
        padding: {
          // left: 500,
          right: 0,
          top: 0,
          bottom: 0,
        },
      },
      scales: {
        yAxes: [
          {
            ticks: {
                reverse: true,
            },          
          },        
        ], 
        xAxes: [
          {
            gridLines: {
              display: false,
            },
            ticks: {
                // Include a dollar sign in the ticks
                callback: function(value, index, values) {
                    return  value.split('.').slice(0,2).join('.');
                }
            },          
          },
        ],
      },

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

我不知道如何或是否甚至可以为比例定义宽度，但您可以做的是在右侧添加第二个 Y 轴，禁用网格，回调返回几个空格作为间距

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
          position: 'left'
        },
        {
          position: 'right',
          gridLines: {
            display: false
          },
          ticks: {
            callback: () => ('     ')
          }
        }
      ]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

【讨论】：