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

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

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

但是，此选项将颜色映射到数据中的每个系列

换句话说，如果你只有一栏，你就只有一个系列，
而且只有一种颜色

在相同系列/列中设置不同颜色的行，
使用Style Column Role --> {role: 'style'}

请参阅以下工作 sn-p...

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 配置选项，将数据放在单独的列中，
请参阅以下工作 sn-p...

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>