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

Question

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

它表示左栏，右栏上全场得分在当前得分。

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

一直在寻找周围，但它只是发现堆积柱形图只。是否有可能将2个酒吧结合在一起？

Answer 1

我找到了解决方案。对于chart.js之2.1.x的开始（它不工作chart.js之1.XX），您可以将自定义选项的数据集，如下图所示：

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

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

我使用图表JS 2.2。 1个宝石从this source。第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格式，否则将被视为字符串格式等等错误。您可以像平常一样创建一个实例变量并传递给helper方法。

不会说这是一个完美的解决方案，但它生成html和pdf（使用wicked-pdf）效果很好。