Javascript Chartjs-保持两个图形并排对齐

Jsfiddle：

我有两个相邻的条形图，我希望它们相对于x轴对齐。我很难做到这一点，因为图形高度会根据标签的长度而变化（请参见JSFIDLE链接）。保持实际图表（相对于画布）高度一致性的最佳方法是什么

var数据、ctx、mychart；
数据={
标签：[“Iantojones”、“Jackharkness”、“Owenharper”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2200,0.8）”，
高光填充：“rgba（2200,0.75）”，
强光笔划：“rgba（2201）”，
数据：[50,88,15]
}
]
};
ctx=document.getElementById（“图表a”）.getContext（“2d”）；
mychart=新图表（ctx）.Bar（数据）；
数据={
标签：[“Dmitri.Ivanovich.Mendeleev”、“Yuri.Alekseyevich.Gagarin”、“Alexey.Arkhipovich.Leonov”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2200,0.8）”，
高光填充：“rgba（2200,0.75）”，
强光笔划：“rgba（2201）”，
数据：[50,88,15]
}
]
};
ctx=document.getElementById（“图表b”）.getContext（“2d”）；
mychart=新图表（ctx）.Bar（数据）；
数据={
标签：[“Iantojones”、“Jackharkness”、“Owenharper”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2200,0.8）”，
高光填充：“rgba（2200,0.75）”，
强光笔划：“rgba（2201）”，
数据：[50,88,15]
}
]
};
ctx=document.getElementById（“图表c”）.getContext（“2d”）；
mychart=新图表（ctx）.Bar（数据）；
数据={
标签：[“Dmitri.Ivanovich”、“Yuri.Alekseyevich”、“Alexey.Arkhipovich”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2200,0.8）”，
高光填充：“rgba（2200,0.75）”，
强光笔划：“rgba（2201）”，
数据：[50,88,15]
}
]
};
ctx=document.getElementById（“图表d”）.getContext（“2d”）；
mychart=新图表（ctx）.Bar（数据）
#图表a，
#图表c{
宽度：320px；
高度：200px；
}
#图b，
#图表d{
宽度：320px；
高度：350px；
}
.标签{
文本对齐：居中；
宽度：600px；
字体大小：20px；
字体大小：粗体；
利润率：20px；
}
.chart_容器{
浮动：左；
}

对齐的
未点火
有点黑客行为：-）

Chart.js计算图表区域的顶部和底部坐标，然后使用该坐标绘制图表（点、条、线…）。因此，如果我们设法设置/覆盖该图表区域的底部坐标，我们可以向上/向下移动x轴

此底部坐标位于
.scale.endPoint
中。因此，如果我们在绘制图表之前覆盖它，我们就可以控制x轴的绘制位置

为此，我们创建一个新的图表类型并覆盖draw函数，如下所示

Chart.types.Bar.extend({
    name: "BarAlt",
    draw: function(){
        this.scale.endPoint = 200;
        Chart.types.Bar.prototype.draw.apply(this, arguments);
    }
});


我们可以通过选项进行配置，而不是传入硬编码值（200）。所以

Chart.types.Bar.extend({
    name: "BarAlt",
    draw: function(){
        this.scale.endPoint = this.options.endPoint;
        Chart.types.Bar.prototype.draw.apply(this, arguments);
    }
});

及


事实上，如果我们将两个图表的大小设置为具有相同的高度和宽度，我们甚至可以将此选项设置为与带有较大标签的图表的端点相同，从而对齐x轴'，如下所示

#chart_a,
#chart_b {
    width: 320px;
    height: 350px;
}

假设图表b有大的标签，我们先画出来（如myChart2）

（我们不必为myChart2使用BarAlt，因为我们不需要控制它的x轴位置）


现在，一切似乎都很好，除了酒吧似乎是从原来的位置动画，这是有点丑陋的事实。因此，我们采用了我们能想到的最简单的修复方法-关闭动画

ctx = document.getElementById("chart_a").getContext("2d");
mychart1 = new Chart(ctx).BarAlt(data, {
    endPoint: mychart2.scale.endPoint,
    animation: false
});


工作小提琴-

我冒昧地删除了第二组图表。
如果没有大量的黑客操作，就无法完成；-//但ChartJS确实给出了坚实的基础，因为它是开放源码和麻省理工学院许可，你可以做你想要的修改。
ctx = document.getElementById("chart_a").getContext("2d");
mychart1 = new Chart(ctx).BarAlt(data, {
    endPoint: mychart2.scale.endPoint
});

ctx = document.getElementById("chart_a").getContext("2d");
mychart1 = new Chart(ctx).BarAlt(data, {
    endPoint: mychart2.scale.endPoint,
    animation: false
});