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 넓은 캔버스를 CSS overflow가 auto로 설정된 1000px DIV 태그 안에 있습니다 (스크롤 막대를 얻을 수 있도록).

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

그리고 차트를 만드는 코드 :

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

당신의 HTML에서 캔버스 태그를 정의합니다

이 라이브러리를 포함 : 여기

해당 페이지에서 코드의

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();