Question

我有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

有点哈客： - ）

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轴，如此< / p>

#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/

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

Chartjs - 保持2个图并排排列

1 个答案: