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

本文关键字：颜色 条形图 谷歌 何添加 添加 | 更新日期: 2023-09-27 18:12:24

第一阶段:我已经绑定了数据源

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

但是它只对每一行使用第一种颜色例如，每一行都是红色

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

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

但是，该选项将颜色映射到数据

中的每个系列。

换句话说，如果你只有一列，你就只有一个级数，
只有一种颜色

为同一系列/列中的行设置不同颜色的样式，
使用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>

相关文章：