Google 차트 집계 데이터 테이블에 스타일 역할 열을 추가하는 방법

Question

google.visualization.data.group에 의해 집계 된 다음, columnChart로 공급되는 데이터베이스 데이터에서 생성 된 데이터 테이블이 있습니다.

기본적으로 결과 차트의 막대는 모두 같은 색이지만 막대를 다른 색으로 만듭니다 (데이터 테이블을 반복하고 데이터 테이블의 각 행에 다른 색을 지정 함). 이제, 간단하게 각 막대에 '금색'색상을 지정하려고합니다.

이것은 columnChart의 경우 documentation이고 스타일 역할의 경우 documentation입니다.

내 코드는 지금까지 잘못 될 수 있다고 생각하지 않습니다 :

var groupedCategoryData = new google.visualization.data.group(
     stacked01Data, // arg 1 is the array of input data 
     [{ // arg 2 is the key (An array of numbers/objects being columns to group by) 
      column: 0, type: 'string' 
     }], 
     [{ 'column': 1, 'aggregation': google.visualization.data.avg, 'type': 'number' }] 
    );//group. col 1 = score 

    //*****************   
    groupedCategoryData.addColumn({ type: 'string', role: 'style' }); 
    for (var i = 0; i < groupedCategoryData.length; i++) { 
     groupedCategoryData[i][2] = 'color: gold'; 
    }//for 
    //***************** 

    var stacked01_options = { 
     width: 500, 
     height: 300 
    };//options 

    var stacked01 = new google.visualization.ColumnChart(document.getElementById('stackedChart01_div')); 
    stacked01.draw(groupedCategoryData, stacked01_options); 

결과는 누구의 바 모든 기본 파란색 차트이다. 나는 이것이 자바 스크립트에 대한 나의 첫 번째 진입임을 인정한다. 어떤 도움을 주시면 감사하겠습니다.

Answer 1

그래, 그랬어. WhiteHat에게 감사드립니다. 작업 코드 :

//include the bar color data 
var colorsGreen = [ 
    [0, 1, '#6AB293'], 
    [1, 2, '#449371'], 
    [2, 3, '#277553'], 
    [3, 4, '#115639'], 
    [4, 5, '#043822'] 
]; 
groupedCategoryData.addColumn('string', 'barColor'); 
var groupedCategoryDataView = new google.visualization.DataView(groupedCategoryData); 
groupedCategoryDataView.setColumns([0, 1, { 
    calc: function (dt, row) { 
     var rowValue = dt.getValue(row, 1); 
     var color; 
     colorsGreen.forEach(function (range, index) { 
      if ((rowValue >= range[0]) && ((rowValue < range[1]) || (range[1] === null))) { 
       color = range[2]; 
      } 
     }); 
     return color; 
    }, 
    role: 'style', 
    type: 'string' 
}]); 


var stacked01_options = { 
    width: 500, 
    height: 300 
};//options 

var stacked01 = new google.visualization.ColumnChart(document.getElementById('stackedChart01_div')); 
stacked01.draw(groupedCategoryDataView, stacked01_options); 

} 당신이 그룹화 된 데이터를 통해 데이터보기를 사용할 수 있습니다