可能合併條形圖中的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）效果很好。