如何添加不同的颜色为每个列在谷歌条形图

Question

第一阶段：我已经结合

private DataTable GetData() 
{ 
    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionStringName"].ConnectionString); 
    DataSet dsData = new DataSet(); 

    try 
    { 

      string sqlString = "select top 5\n" + 
      "   b.name, COUNT(codAmount) as ca\n" + 
      "  from consignment as c, Branches as b,\n" + 
      "  CODConsignmentDetail_New as cn\n" + 
      "  where c.destination = b.BranchCode\n" + 
      "  and c.consignmentNumber = cn.consignmentNumber\n" + 
      "  and c.consignerAccountNo = '" + Session["AccountNo"].ToString() + "'\n" + 
      "  group by b.name\n" + 
      "  order by ca desc"; 

      SqlCommand SQLCmd = new SqlCommand(sqlString, con); 
      SQLCmd.CommandType = CommandType.Text; 

      SqlDataAdapter da = new SqlDataAdapter(); 
      da.SelectCommand = SQLCmd; 

      DataTable dt = new DataTable(); 

      da.Fill(dt); 

      con.Close(); 
      return dt; 
     } 
     catch 
     { 
      throw; 
     } 
} 

然后，我已经创建了条形图的数据源，但它仅使用一个颜色每列是蓝色的。

我试图通过发送颜色通过数组追加颜色，但它不起作用。

private void BindChart1() 
{ 
     StringBuilder str = new StringBuilder(); 
     DataTable dt = new DataTable(); 

     try 
     { 
      dt = GetData(); 

      str.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', 'Name'); 
     data.addColumn('number', 'Consignment Amount');  

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

      string[] colours={ "green","blue","yellow","brown","red"}; 

      for (int i = 0; i <= dt.Rows.Count - 1; i++) 
      { 
       str.Append("data.setValue(" + i + "," + 0 + "," + "'" + dt.Rows[i]["name"].ToString() + "');"); 
       str.Append("data.setValue(" + i + "," + 1 + "," + dt.Rows[i]["ca"].ToString() + ") ;"); 
       //str.Append(" chart.draw(colors:['"+colours[i].ToString()+"'],"); 
      } 

      str.Append(" var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));"); 
      str.Append(" chart.draw(data, {width: 550, height: 300, title: 'COD amount amoungst Cities',"); 
      str.Append("hAxis: {title: 'Cities', titleTextStyle: {color: 'green'}}"); 
      str.Append("}); }"); 
      str.Append("</script>"); 
      lt.Text = str.ToString().Replace('*', '"'); 
      lt.Visible = true; 
     } 
     catch 
     { } 
    } 

我也尝试添加下面的颜色功能这样

str.Append(" chart.draw(data, {width: 550, height: 300, title: 'COD amount amongst Cities',color:['red','blue','yellow','green','black',]"); 

但只使用每一行例如每次都会有红色的第一种颜色。

Answer 1

配置选项是复数colors - >colors: ['red', 'blue', 'yellow', 'green', 'black']

然而，此选项颜色映射到每个系列的数据

换句话说

，如果你只有一列，你只有一个系列，
只有一种颜色

样式行与在同系列/列，不同的颜色3210 使用Style Column Role - >{role: 'style'}

见下工作片断......

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.arrayToDataTable([ 
 
     ['Month', 'Value', {role: 'style'}], 
 
     ['Aug', 3754, 'red'], 
 
     ['Sept', 900, 'blue'], 
 
     ['Oct', 2000, 'yellow'], 
 
     ['Nov', 1700, 'green'], 
 
     ['Dec', 2400, 'black'] 
 
    ]); 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.ColumnChart(container); 
 
    chart.draw(data, {legend: 'none'}); 
 
    }, 
 
    packages: ['corechart'] 
 
});

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

2.使用colors配置选项，数据放在单独的列，
请参阅以下工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.arrayToDataTable([ 
 
     ['Label', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
 
     ['Month', 3754, 900, 2000, 1700, 2400] 
 
    ]); 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.ColumnChart(container); 
 
    chart.draw(data, { 
 
     bar: { 
 
     groupWidth: '90%' 
 
     }, 
 
     colors: ['red', 'blue', 'yellow', 'green', 'black'] 
 
    }); 
 
    }, 
 
    packages: ['corechart'] 
 
});

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