Chart.js同一標籤的多列數據

Question

我正在使用Chart.js 2.7，並且想要顯示同一標籤的多列數據。例如，我想要一個以年份的月份作爲標籤的圖表，但是要顯示一個月份的每一天的數字，而不是每月的數字。因此，對於單個標籤，我將擁有大約30列數據。

這可能嗎？

Answer 1

這聽起來像一個分組條形圖。下面是一個使用RGraph一個例子（https://www.rgraph.net），以顯示它：

https://www.rgraph.net/fiddle/view.html/a-grouped-bar-chart-example

，你必須是個非常寬的圖表的數據量，但（12X30條）雖然，所以在這裏你有一個5000px寬的帆布它位於一個1000px的DIV標籤中，CSS標籤的CSS溢出設置爲auto（這樣你就可以得到一個滾動條）。

下面是從該網頁的代碼：

包括圖書館：

<script src="/libraries/RGraph.common.core.js"></script> 
<script src="/libraries/RGraph.bar.js"></script> 

定義在HTML canvas標籤：

<div style="width: 1000px; overflow: auto"> 
    <canvas id="cvs" width="5000" height="250">[No canvas support]</canvas> 
</div> 

這使得圖表代碼：

var bar = new RGraph.Bar({ 
    id: "cvs", 
    data: [ 
     [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // January 
     [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2], // February 
     [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // March 
     [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2], // April 
     [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // May 
     [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2], // June 
     [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // July 
     [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2], // August 
     [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // September 
     [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2], // October 
     [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // November 
     [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2] // December 
    ], 
    options: { 
     colors: ['red'], 
     shadow: false, 
     labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] 
    } 
}).draw();