Google 차트 막대 차트 : 모든 막대의 색상을 수동으로 변경하는 방법은 무엇입니까? 내가 구글 차트와 간단한 막대 그래프를 작성했습니다

Question

(단일 시리즈), 하나의 시리즈는, 잘 작동, 모든 바는 파란색 :

가 지금은 수동의 색상을 설정에 싶습니다 모든 단일 막대 (실제로 녹색/빨간색 전환이 값에 비례하여 좋거나 나쁨을 쉽게 이해할 수 있도록 함). 어떻게해야합니까?

here으로 설명한대로 colors을 설정하려고 시도했으나 어떤 이유로 아래 코드에서 작동하지 않습니다.

chco 내가 필요로하는 것 같지만 URL 매개 변수입니다 ... 어떻게 우아하게 JavaScript 코드에 통합 할 수 있습니까?

google.setOnLoadCallback(drawChart); 
 
     function drawChart() { 
 
     var data = google.visualization.arrayToDataTable([ 
 
      ['Product', 'Score'], 
 
      ['NemakiWare', 288], 
 
      ['Nuxeo', 240], 
 
      ['FileNet', 220], 
 
      ['SharePoint', 98] 
 
     ]); 
 

 
     var options = { 
 
      colors: ['green','blue','pink','red'], 
 
      legend: 'none', 
 
      hAxis: { 
 
       textPosition: 'none', 
 
       minValue: 0, 
 
       gridlines: { 
 
        color: 'transparent' 
 
       } 
 
      } 
 
     }; 
 

 
     var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
 

 
     chart.draw(data, options); 
 
     }

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
 
     <div id="chart_div" style="width: 900px; height: 500px;"></div>

Answer 1

는이 작업을 수행하는 여러 가지 방법이 있습니다하지만 당신은 스타일의 역할을 사용할 수 있습니다.

출처 : https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors

google.setOnLoadCallback(drawChart); 
 
     function drawChart() { 
 
     var data = google.visualization.arrayToDataTable([ 
 
      ['Product', 'Score', { role: 'style' }], 
 
      ['NemakiWare', 288, 'green'], 
 
      ['Nuxeo', 240, 'blue'], 
 
      ['FileNet', 220, 'pink'], 
 
      ['SharePoint', 98, 'red'] 
 
     ]); 
 

 
     var options = { 
 
      legend: 'none', 
 
      hAxis: { 
 
       textPosition: 'none', 
 
       minValue: 0, 
 
       gridlines: { 
 
        color: 'transparent' 
 
       } 
 
      } 
 
     }; 
 

 
     var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
 
chart.clearChart(); 
 
     chart.draw(data, options); 
 
     }

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
 
     <div id="chart_div" style="width: 900px; height: 500px;"></div>