조건부로 Google 열 그래프의 색을 설정합니다.

Question

값에 따라 Google 그래프의 기둥 형 차트에서 조건부로 지정된 열의 색을 설정할 수 있기를 원합니다. 예를 들어 막대가 < 50이면 노란색 또는 70보다 높게 색을 지정하고 녹색으로 지정합니다. API 자체 내에서 솔루션을 완성해도 좋지만 아마 그렇지 않을 수도 있습니다. 당신은 색상을 원하는 경우

Answer 1

당신은

스타일을해야
시리즈 열을 따라야하는 특정 열

스타일의 역할은 데이터 테이블에서 바로 열입니다 색상하기 위해 'style' column role을 사용할 수 있습니다 조건부 색상 할당 할

['A', 100, 'green'] 

예를 들어 열 녹색 ...,
우리는 DataView 사용할 수 있습니다 그리고 우리 허용 setColumns method
는 ... 배열 값의 범위를 저장하는 데 사용과 관련된 색,
을

작업 조각 다음 참조 계산 된 열을 추가

google.charts.load('current', { 
 
    packages: ['corechart'] 
 
}).then(function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'y'], 
 
    ['A', 9], 
 
    ['B', 30], 
 
    ['C', 50], 
 
    ['D', 70], 
 
    ['E', 90] 
 
    ]); 
 

 
    var ranges = [ 
 
    [0, 10, '#e53935'], // red 
 
    [10, 50, '#fdd835'], // yellow 
 
    [50, 90, '#43a047'], // green 
 
    [90, null, '#1e88e5'] // blue 
 
    ]; 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, { 
 
    calc: function (dt, row) { 
 
     var rowValue = dt.getValue(row, 1); 
 
     var color; 
 
     ranges.forEach(function (range, index) { 
 
     if ((rowValue >= range[0]) && ((rowValue < range[1]) || (range[1] === null))) { 
 
      color = range[2]; 
 
     } 
 
     }); 
 
     return color; 
 
    }, 
 
    role: 'style', 
 
    type: 'string' 
 
    }]); 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    chart.draw(view, { 
 
    legend: 'none' 
 
    }); 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>