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

【问题标题】：Possible to merge 2 bars in bar chart (chart.js)可以在条形图中合并 2 个条形 (chart.js)
【发布时间】：2017-07-03 15:52:03
【问题描述】：

目前，我有一个条形图，其中有 2 个结果在 Rails 5 上使用 chart.js 进行横向比较。如第一张图片所示。

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

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

一直在搜索，但只找到堆积条形图。是否可以将 2 个小节组合在一起？

【问题讨论】：

chartjs.org/samples/latest/charts/bar/stacked.html
谢谢。您知道我如何更改数据集的代码，以便它可以与右侧的图例堆叠在一起吗？似乎可以通过在数据集中使用 { stack: 1 } 对其进行分组。如果您需要更多信息，我可以提供代码。

标签： javascript ruby-on-rails ruby charts chart.js

【解决方案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）。

【讨论】：