javascript - 可以在条形图中合并 2 个条形图 (chart.js)

Question

目前，我在 Rails 5 上使用 chart.js 有一个包含 2 个结果的条形图并排比较。如第一张图片所示。

左栏显示当前分数，右栏显示满分。

但我收到的要求是条形图必须结合并显示当前分数和总分数的图例。

四处搜索，但只找到堆叠条形图。是否可以将 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)。