问题描述
Jsfiddle：
Jsfiddle: http://jsfiddle.net/8gvkmLxL/
我有2个彼此相邻的条形图，我希望它们相对于它们的x轴对齐。由于图形的高度根据标签的长度而变化，因此我很难做到这一点（请参阅jsfiddle链接）。保持实际图表高度（而不是画布）高度一致性的最佳方法是什么？
I have 2 bar graphs that are next to each other and I want them to be aligned relative to their x-axis. I'm having trouble achieving this as the graph height changes according to the length of the labels (see jsfiddle link). What's the best way to maintain consistency of height of the actual charts (as opposed to the canvas)
var data,ctx,mychart;
data = {
labels: ["Iantojones","Jackharkness","Owenharper"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [50, 88, 15]
}
]
};
ctx = document.getElementById("chart_a").getContext("2d");
mychart = new Chart(ctx).Bar(data);
data = {
labels: ["Dmitri.Ivanovich.Mendeleev","Yuri.Alekseyevich.Gagarin","Alexey.Arkhipovich.Leonov"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [50, 88, 15]
}
]
};
ctx = document.getElementById("chart_b").getContext("2d");
mychart = new Chart(ctx).Bar(data);
data = {
labels: ["Iantojones","Jackharkness","Owenharper"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [50, 88, 15]
}
]
};
ctx = document.getElementById("chart_c").getContext("2d");
mychart = new Chart(ctx).Bar(data);
data = {
labels: ["Dmitri.Ivanovich","Yuri.Alekseyevich","Alexey.Arkhipovich"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [50, 88, 15]
}
]
};
ctx = document.getElementById("chart_d").getContext("2d");
mychart = new Chart(ctx).Bar(data);#chart_a,
#chart_c {
width: 320px;
height: 200px;
}
#chart_b,
#chart_d {
width: 320px;
height: 350px;
}
.label {
text-align: center;
width: 600px;
font-size: 20px;
font-weight: bold;
margin: 20px;
}
.chart_container {
float: left;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<div id="aligned">
<div class="label">Aligned</div>
<div class="chart_container">
<canvas id="chart_a"></canvas>
</div>
<div class="chart_container">
<canvas id="chart_b"></canvas>
</div>
</div>
<div id="unaligned">
<div class="label">Unligned</div>
<div class="chart_container">
<canvas id="chart_c"></canvas>
</div>
<div class="chart_container">
<canvas id="chart_d"></canvas>
</div>
</div>推荐答案
一点黑客行为：-）
Chart.js计算图表区域的顶部和底部坐标，然后使用它绘制图表（点，条，线...）。因此，如果我们设法设置/覆盖此图表区域的底部坐标，则可以向上/向下推x轴。
Chart.js calculates the top and bottom coordinates of the chart area and then uses this to draw the chart (points, bars, lines...). So if we manage to set / override the bottom coordinate of this chart area we can lift up / push down the x axis.
此底部坐标位于< myChart instace> .scale.endPoint 。因此，如果我们在绘制图表之前将其覆盖，则可以控制x轴的绘制位置。
This bottom coordinate is in <<myChart instace>>.scale.endPoint. So if we overwrite this before the chart is drawn we have control over where the x axis is drawn.
为此，我们创建了一个新的图表类型并覆盖了draw函数，就像这样。
To do this we create a new chart type and override the draw function, like this.
Chart.types.Bar.extend({
name: "BarAlt",
draw: function(){
this.scale.endPoint = 200;
Chart.types.Bar.prototype.draw.apply(this, arguments);
}
});
而不是传递硬编码值（200 ），我们可以通过选项进行配置。因此
Instead of passing in a hard coded value (200) we could configure this via options. So
Chart.types.Bar.extend({
name: "BarAlt",
draw: function(){
this.scale.endPoint = this.options.endPoint;
Chart.types.Bar.prototype.draw.apply(this, arguments);
}
});
和
ctx = document.getElementById("chart_a").getContext("2d");
mychart1 = new Chart(ctx).BarAlt(data, {
endPoint: 200
});
实际上，如果我们将两个图表的大小都设为高度和宽度相同，我们甚至可以将此选项设置为与图表中带有较大标签的endPoint相同，从而将x轴对齐，就像这样
In fact, if we size both charts to be of the same height and width, we could even set this option to be same as the endPoint from the chart with the larger labels, thus aligning the x axis', like so
#chart_a,
#chart_b {
width: 320px;
height: 350px;
}
并假设chart_b具有大标签，我们首先将其绘制（如myChart2）
and assuming chart_b had the large labels and we drew that first (as myChart2)
ctx = document.getElementById("chart_a").getContext("2d");
mychart1 = new Chart(ctx).BarAlt(data, {
endPoint: mychart2.scale.endPoint
});
（而且我们不必为MyChart2使用BarAlt，因为我们不需要控制它x轴位置）
(and we don't have to use BarAlt for myChart2 because we don't need to control it's x axis position)
现在，一切看起来都很好，只是条形图似乎从原来的位置，有点难看。因此，我们输入了我们可以想到的最简单的修复方法-关闭动画！
Now, all seems well and good, except for the fact that the bars seem to be animating from the original postion, which is a bit ugly. So we put in the easiest fix we can think of - turn off the animation!
ctx = document.getElementById("chart_a").getContext("2d");
mychart1 = new Chart(ctx).BarAlt(data, {
endPoint: mychart2.scale.endPoint,
animation: false
});
工作小提琴-
我自由删除了第二组图表。
I took the liberty of removing the 2nd set of charts.
这篇关于Chartjs-保持2个图形并排对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！