Chartjs - 保持2个图并排排列

Question

Jsfiddle:http://jsfiddle.net/8gvkmLxL/

我有2个彼此相邻的条形图,我希望它们相对于它们的x轴对齐.我无法实现这一点,因为图形高度会根据标签的长度而变化(请参阅jsfiddle链接).什么是保持实际图表高度一致性的最佳方法(与画布相对)

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>

Answer 1

一点Hackery :-)

Chart.js计算图表区域的顶部和底部坐标,然后使用它来绘制图表(点,条,线......).因此,如果我们设法设置/覆盖此图表区域的底部坐标,我们可以向上/向下推动x轴.

这个底部坐标是<<myChart instace>>.scale.endPoint.因此,如果我们在绘制图表之前覆盖它,我们就可以控制绘制x轴的位置.

为此,我们创建一个新的图表类型并覆盖绘图功能,如下所示.

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);
    }
});

和

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

事实上,如果我们将两个图表的大小和宽度都设置为相同,我们甚至可以将此选项设置为与具有较大标签的图表中的endPoint相同,从而对齐x轴',就像这样

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

并假设chart_b有大标签,我们首先绘制(作为myChart2)

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

(我们不必为myChart2使用BarAlt,因为我们不需要控制它的x轴位置)

现在,一切看起来都很好,除了条形图似乎是从原始位置动画,这有点难看.所以我们提出了我们能想到的最简单的解决方案 - 关闭动画!

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

工作小提琴 - http://jsfiddle.net/2kmf10hg/

我冒昧地删除了第二组图表.