値に基づいてガントチャットのバーの色を変更してください

Question

私は渡している値に基づいてガントチャートのバーの色を変更したいと思います。 Percent doneが100より大きい場合、バーは赤色になります。出来ますか？

https://jsfiddle.net/1cez1duf/

google.charts.load('current', {'packages':['gantt'], 'language': 'pt-br'}); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 

    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Task ID'); 
    data.addColumn('string', 'Task Name'); 
    data.addColumn('string', 'Resource'); 
    data.addColumn('date', 'Start Date'); 
    data.addColumn('date', 'End Date'); 
    data.addColumn('number', 'Duration'); 
    data.addColumn('number', 'Percent done'); 
    data.addColumn('string', 'Dependencies'); 

    data.addRows([  
     ['C10', 'C10', 'Xa', new Date(2015, 3, 20), new Date(2016, 8, 30), null, 109, null], 
     ['C15', 'C15', 'Xa', new Date(2016, 5, 2), new Date(2016, 9, 31), null, 111, null], 
     ['C20', 'C20', 'Xa', new Date(2016, 8, 15), new Date(2016, 10, 25), null, 88, null], 
     ['C21', 'C21', 'Xa', new Date(2016, 8, 1), new Date(2016, 10, 25), null, 90, null] 
    ]); 

    var options = { 
     width: "100%", 
     hAxis: { 
      textStyle: { 
       fontName: ["Roboto Condensed"] 
      } 
     }, 
     gantt: { 
      labelStyle: { 
       fontSize: 12, 
       color: '#757575' 
      } 
     } 
    }; 

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

Answer 1

そこ値

でバーの色を変更するには、任意の標準オプションはありませんが、あなたは、チャートをしようとするとMutationObserverを使用することをお勧め手動

グラフ要素を変更することができますホバーや選択などのインタラクティブ機能で、バーの色をデフォルトに戻す

t彼の棒の順序は、部分的に完成がある場合に、それが表示された作業スニペット次...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['gantt'] 
 
}); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Task ID'); 
 
    data.addColumn('string', 'Task Name'); 
 
    data.addColumn('string', 'Resource'); 
 
    data.addColumn('date', 'Start Date'); 
 
    data.addColumn('date', 'End Date'); 
 
    data.addColumn('number', 'Duration'); 
 
    data.addColumn('number', 'Percent done'); 
 
    data.addColumn('string', 'Dependencies'); 
 

 
    data.addRows([ 
 

 
    ['C10', 'C10', 'Xa', new Date(2015, 3, 20), new Date(2016, 8, 30), null, 109, null], 
 
    ['C15', 'C15', 'Xa', new Date(2016, 5, 2), new Date(2016, 9, 31), null, 111, null], 
 
    ['C20', 'C20', 'Xa', new Date(2016, 8, 15), new Date(2016, 10, 25), null, 88, null], 
 
    ['C21', 'C21', 'Xa', new Date(2016, 8, 1), new Date(2016, 10, 25), null, 90, null] 
 
    ]); 
 

 
    var options = { 
 
    width: '100%', 
 
    hAxis: { 
 
     textStyle: { 
 
     fontName: ['Roboto Condensed'] 
 
     } 
 
    }, 
 
    gantt: { 
 
     labelStyle: { 
 
     fontSize: 12, 
 
     color: '#757575' 
 
     } 
 
    } 
 
    }; 
 

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

 
    // monitor activity, change bar color 
 
    var observer = new MutationObserver(function (mutations) { 
 
    Array.prototype.forEach.call(container.getElementsByTagName('path'), function(bar, index) { 
 
     if (data.getValue(index, 6) > 100) { 
 
     bar.setAttribute('fill', '#a52714'); 
 
     } 
 
    }); 
 
    }); 
 
    observer.observe(container, { 
 
    childList: true, 
 
    subtree: true 
 
    }); 
 

 
    chart.draw(data, options); 
 
}

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

EDIT

を参照してくださいdata

の行に従ってください、「バー」は2つの色で分割されています
明るい色合いはb屋'rect'要素
あなたも正しい'rect'

を見つけること'path'のY座標を使用し、赤
の薄い色 にこれを変更することができ、チャートに表示されたのと同じ順序でデータをソートする必要があります。 ..

...作業スニペット以下を参照してください

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['gantt'] 
 
}); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Task ID'); 
 
    data.addColumn('string', 'Task Name'); 
 
    data.addColumn('string', 'Resource'); 
 
    data.addColumn('date', 'Start Date'); 
 
    data.addColumn('date', 'End Date'); 
 
    data.addColumn('number', 'Duration'); 
 
    data.addColumn('number', 'Percent done'); 
 
    data.addColumn('string', 'Dependencies'); 
 

 
    data.addRows([ 
 
    ['C10', 'C10', 'Xa', new Date(2016, 2, 23), new Date(2016, 10, 30), null, 94.84, null], 
 
    ['C15', 'C15', 'Xa', new Date(2016, 4, 1), new Date(2016, 11, 29), null, 82.64, null], 
 
    ['C20', 'C20', 'Xa', new Date(2016, 7, 1), new Date(2016, 10, 25), null, 93.1, null], 
 
    ['C25', 'C25', 'Xa', new Date(2016, 3, 11), new Date(2016, 10, 25), null, 96.49, null], 
 
    ['C30', 'C30', 'Xa', new Date(2016, 9, 3), new Date(2017, 1, 28), null, 30.41, null], 
 
    ['C35', 'C35', 'Xa', new Date(2016, 3, 8), new Date(2016, 5, 24), null, 113.78, null] 
 
    ]); 
 
    data.sort([{column: 3}]); 
 

 
    var w = window, 
 
    d = document, 
 
    e = d.documentElement, 
 
    g = d.getElementsByTagName('body')[0], 
 
    xWidth = w.innerWidth || e.clientWidth || g.clientWidth, 
 
    yHeight = w.innerHeight|| e.clientHeight|| g.clientHeight; 
 

 
    var options = { 
 
    height: 600, 
 
    width: "100%", 
 
    hAxis: { 
 
     textStyle: { 
 
     fontName: ["Roboto Condensed"] 
 
     } 
 
    }, 
 
    gantt: { 
 
     labelStyle: { 
 
     fontName: ["Roboto Condensed"], 
 
     fontSize: 12, 
 
     color: '#757575' 
 
     } 
 
    } 
 
    }; 
 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.Gantt(container); 
 

 
    // monitor activity, change bar color 
 
    var observer = new MutationObserver(function (mutations) { 
 
    Array.prototype.forEach.call(container.getElementsByTagName('path'), function(bar, index) { 
 
     var barY; 
 
     if (data.getValue(index, 6) > 100) { 
 
     bar.setAttribute('fill', '#b71c1c'); 
 
     barY = bar.getAttribute('d').split(' ')[2]; 
 
     Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(bar) { 
 
      if (bar.getAttribute('y') === barY) { 
 
      bar.setAttribute('fill', '#f44336'); 
 
      } 
 
     }); 
 
     } 
 
    }); 
 
    }); 
 
    observer.observe(container, { 
 
    childList: true, 
 
    subtree: true 
 
    }); 
 

 
    chart.draw(data, options); 
 
}

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