能否在条形图（chart.js）中合并两个条形？

Question

目前，我在Rails 5上使用chart.js创建了一个柱状图，它通过对比两个结果并将它们放在一起展示。如第一张图片所示。

它显示了左边的柱子的当前得分和右边柱子的总分。

但是，我收到了这样的请求：要将这些柱状图合并，并显示当前得分和总得分的图例。

我已经搜索过了，但只发现了堆叠柱状图。是否有可能将两个柱子合并在一起呢？

- Yewness

---

http://www.chartjs.org/samples/latest/charts/bar/stacked.html - fanta

谢谢。您知道我如何修改数据集的代码，使其可以堆叠，并将图例放在右侧吗？似乎可以使用数据集中的 { stack: 1 } 进行分组。如果需要更多信息，我可以提供代码。 - Yewness

Answer 1

我已经找到了解决方案。对于Chart.js 2.1.x及以上版本（在Chart.js 1.x.x中不起作用），您可以按照下面所示的自定义选项应用数据集:

var options = {
  scales:{
    xAxes: [{ stacked: true }],
    yAxes: [{ stacked: true }]
  }
};

var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});

我正在使用来自此源的chart js 2.2.1 gem。第3到35行的帮助方法提供了创建堆叠条形图的见解。但是它没有选项来输入给定方法中的数据。因此，让我们覆盖帮助方法：

  def chart2_bar id=nil, size=nil, data={}, options={}
    html = "<canvas id=\"myChart_bar\" width=\"#{size[:width]}px\" height=\"#{size[:height]}px\"></canvas>".html_safe
    script = javascript_tag do
      <<-END.html_safe
      var ctx = document.getElementById("myChart_bar");
      var data = "#{data.to_json}";
      var options = "#{options.to_json}";
      var myBarChart = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: options
      });
      END
    end
    return html + script
  end

数据必须采用JSON格式，否则将被视为字符串格式，从而导致错误。您可以创建一个实例变量，并像往常一样将其传递到助手方法中。这不是完美的解决方案，但对于生成HTML和PDF（使用wicked-pdf）非常有效。

- Yewness