谷歌可視化 - 設置顏色

Question

在我的應用程序中，如果「實際」值大於「計劃」，我想要顯示如下條形圖 ，那麼實際欄應爲紅色，如果小於「計劃」應該是「綠色」的顏色 我用下面的代碼

stringBuilder.Append(@"<script type=*text/javascript*> google.load(*visualization*, *1*, {packages:[*corechart*]}); 
               google.setOnLoadCallback(drawChart); 
               function drawChart() { 
               var data = new google.visualization.DataTable(); 
               data.addColumn('string', 'ResourceName'); 
               data.addColumn('number', 'Planned'); 
               data.addColumn('number', 'Actual'); 


          data.addRows(" + dataTable.Rows.Count + ");"); 

        for (int i = 0; i <= dataTable.Rows.Count - 1; i++) 
        { 
         stringBuilder.Append("data.setValue(" + i + "," + 0 + "," + "'" + dataTable.Rows[i]["ResourceName"].ToString() + "');"); 
         stringBuilder.Append("data.setValue(" + i + "," + 1 + "," + dataTable.Rows[i]["Planned"].ToString() + ") ;"); 
         stringBuilder.Append("data.setValue(" + i + "," + 2 + "," + dataTable.Rows[i]["Actual"].ToString() + ") ;"); 

         if (Convert.ToDecimal(dataTable.Rows[i]["Planned"]) > Convert.ToDecimal(dataTable.Rows[i]["Actual"])) 
         { color = "green"; } 
         else 
         { color = "red"; } 
        } 

        stringBuilder.Append(" var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));"); 
        stringBuilder.Append(" chart.draw(data, {width: 660, height: 500, title: 'Resource-Performance Graph',"); 
        stringBuilder.Append("legend: {position: 'right',alignment: 'start',textStyle: {fontSize: 12}},"); 
        stringBuilder.Append("hAxis: {title: 'Resource', titleTextStyle: {color: 'green'},slantedText:true},width:'645',colors: ['DeepSkyBlue','"+color+"'],"); 

        stringBuilder.Append("vAxis:{title: 'Effort (Hr)',titleTextStyle: {color: 'green'}}"); 

        stringBuilder.Append("}); }"); 
        stringBuilder.Append("</script>"); 

我怎麼能爲每個欄的顏色？

Answer 1

我會建議使用Style data role ......

var data = new google.visualization.DataTable(); 
data.addColumn('string', 'ResourceName'); 
data.addColumn('number', 'Planned'); 
data.addColumn('number', 'Actual'); 

// add style column 
data.addColumn({type: 'string', role: 'style'}); 

// add style color 
if (Convert.ToDecimal(dataTable.Rows[i]["Planned"]) > Convert.ToDecimal(dataTable.Rows[i]["Actual"])) { 
    stringBuilder.Append("data.setValue(" + i + "," + 3 + ",'color: green;') ;"); 
} else { 
    stringBuilder.Append("data.setValue(" + i + "," + 3 + ",'color: red;') ;"); 
}