스택 바 플롯 사용하여 자바 스크립트 내가 중첩 된 목록에 다음과 같은 사항에 대해 canvasJS를 사용하여 스택 바 플롯하려고 모든

Question

안녕 :

pepidstat=[[[2016, 61, 'Feb'], [2011, 367, 'Feb'], [2013, 83, 'Feb'], [2014, 89, 'Feb'], [2015, 106, 'Feb']], [[2016, 43, 'Jan'], [2011, 128, 'Jan'], [2013, 150, 'Jan'], [2014, 74, 'Jan'], [2015, 121, 'Jan']]] 

그리고 내 실행 가능한 자바 스크립트는이 스크립트는 제외하고 완벽하게 작동한다

<script type="text/javascript"> 
    window.onload = function() { 
    var chartbar = new CanvasJS.Chart("chartContainerBar", 
    { 
     title:{ 
     text: "Yearly Growth of Total Peptides" 
     }, 
     animationEnabled: true, 
     axisX: { 
    interval: 1, 
    labelFontSize: 10, 
    lineThickness: 0 
     }, 

     data:pepiddata 
    }); 

    chartbar.render(); 
    chartbar={}; 
    } 
    var pepidstatlist = {{ pepidstat|safe }}; 
    var pepiddata = [];var pepiddataSeries = { type: "stackedBar",showInLegend: "true" }; 
    var pepidname= []; 
    var pepiddataPoints = []; 
    for (pi = 0; pi < pepidstatlist.length;pi++) { 
    piname = pepidstatlist[pi][0][2]; 
    for (pj = 0; pj < pepidstatlist[pi].length;pj++) { 
     pidx=pepidstatlist[pi][pj][0]; 
     pidy=pepidstatlist[pi][pj][1]; 
     pepiddataPoints.push({ 
    x:pidx,  
    y: pidy, 
    label: pidx, 
    name:piname, 
    toolTipContent: "{name}-{label}:{y}", 
     }); 
    } 
    pepiddataSeries.name = piname; // here I want pass each month name 

    } 
    pepiddataSeries.dataPoints = pepiddataPoints; 
    pepiddata.push(pepiddataSeries); 
    </script> 

각 달 이름을 데이터 시리즈에 지정할 수 없습니다. 스크립트를 수정해야하는 곳을 알려주십시오. 감사합니다.

Answer 1

단일 데이터 시리즈를 작성하는 중입니다. 두 개의 데이터 시리즈를 작성하고 데이터로 푸시하십시오. 다른 모든 것은 잘 작동합니다.

 
pepidstat=[[[2011, 61, 'Feb'], [2012, 367, 'Feb'], [2013, 83, 'Feb'], [2014, 89, 'Feb'], [2015, 106, 'Feb']], [[2011, 43, 'Jan'], [2012, 128, 'Jan'], [2013, 150, 'Jan'], [2014, 74, 'Jan'], [2015, 121, 'Jan']]] 
 

 
var pepidstatlist = pepidstat; 
 
var pepiddata = []; 
 
var pepidname= []; 
 

 
for (pi = 0; pi < pepidstatlist.length;pi++) { 
 
\t piname = pepidstatlist[pi][0][2]; //month 
 
    var pepiddataPoints = []; 
 
\t for (pj = 0; pj < pepidstatlist[pi].length;pj++) { 
 
\t \t pidx=pepidstatlist[pi][pj][0]; //Year 
 
\t \t pidy=pepidstatlist[pi][pj][1]; //value 
 
\t \t pepiddataPoints.push({ 
 
    \t x:pidx,  
 
    \t y: pidy, 
 
    \t label: pidx, 
 
    \t name:piname, 
 
    \t toolTipContent: "{name}-{label}:{y}", 
 
\t \t }); 
 
\t } 
 
    var pepiddataSeries = { type: "stackedBar", showInLegend: "true" }; 
 
\t pepiddataSeries.name = piname; // here I want pass each month name 
 
\t pepiddataSeries.dataPoints = pepiddataPoints; 
 
\t pepiddata.push(pepiddataSeries); 
 
} 
 

 
var chartbar = new CanvasJS.Chart("chartContainer", 
 
{ 
 
\t title:{ 
 
\t \t text: "Yearly Growth of Total Peptides" 
 
\t }, 
 
\t animationEnabled: true, 
 
\t axisX: { 
 
\t \t interval: 1, 
 
\t \t labelFontSize: 10, 
 
\t \t lineThickness: 0 
 
\t }, 
 
\t data: pepiddata, 
 
}); 
 

 
chartbar.render();

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
 
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart --> 
 
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

팁 : 정렬 배열이 배열 내부의 연도 값을 기준으로.