javascript - Chartjs - 保持 2 个图表并排对齐

Question

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

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

Answer 1

一点点黑客 :-)

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

工作 fiddle - http://jsfiddle.net/2kmf10hg/

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