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;') ;");
}

Google可视化 - 设置颜色

1 个答案: