How to add the different color for each column in

问题:

First phase: I've bound the data source

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;
        }
}

Then I've created the bar chart, but it uses only one color for each column which is blue.

I've to tried to append the color by sending the color through array, but it doesn't work.

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
        { }
    }

I've also tried to add the color function below like this

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

but it only uses the first color for each row for example each will have red color.

回答1:

1. the config option is plural colors --> colors: ['red', 'blue', 'yellow', 'green', 'black']

however, this option maps a color to each series in the data

in other words, if you only have one column, you only have one series,
and only one color

to style rows with different colors in the same series / column,
use a Style Column Role --> {role: 'style'}

see following working snippet...

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. to use the colors config option, put data in separate columns,
see following working snippet...

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>