Chart.js 如何对齐条形图中的两个 X 轴？答案

【问题标题】：Chart.js How to align two X-axis in bar chart?Chart.js 如何对齐条形图中的两个 X 轴？
【发布时间】：2018-11-08 00:15:17
【问题描述】：

我尝试使用带有 2 个 x 轴的 chart.js 构建一个简单的条形图：一个在顶部，另一个在底部。

问题是两个轴标签和网格不对齐。顶部 x 轴居中对齐，底部 x 轴左对齐。

请帮我让两个 x 轴对齐中心。谢谢！

小提琴： jsfiddle.net/gtmvkq4n/2/

截图：

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

您可能正在关注 offset 选项

具有多个数据集的示例：

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E'],
    datasets: [{
      label: 'somelabel',
      xAxisID:'bar-x-axis1',
      data: [40, 50, 30, 12, 52]
    },
    {
      // ... other dataset...
    }]
  },
  options:{
    scales:{
      xAxes:[
        {
          id:'bar-x-axis1',
          type:'category',
          offset: true // <== that one!
        },
        {
          // ... other X axis...
        }]
    }
  }
});

http://www.chartjs.org/docs/latest/axes/cartesian/

【讨论】：

此答案未标记为解决方案，但在我的情况下它解决了问题

【解决方案2】：

让你的条形图包含正确的groupSpace, barSpace, barWidth

(groupSpace * barSpace) * n + groupSpace = 1

使这个等式是正确的，给定 n 是柱的数量

【讨论】：

感谢您的评论。但是你能解释更多关于你的答案的细节吗？我在任何 chart.js 文档中都找不到 groupSpace, barSpace, barWidth。