可以合并条形图中的2个条形图（chart.js）

Question

目前，我有一个条形图，其中2个结果使用Rails 5上的chart.js进行左右对比。如第一张图所示。

表示左栏上的当前得分和右栏上的满分。

但我得到了条形图必须结合并显示当前得分和满分的传说的请求。

一直在寻找，但它只是发现堆积条形图。是否可以将2个条组合在一起？

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

我正在使用来自this source的图表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）。