如何在Google条形图中为每列添加不同的颜色 [英] How to add the different color for each column in the google bar graph
本文介绍了如何在Google条形图中为每列添加不同的颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
private DataTable GetData（）
{
SqlConnection con = new SqlConnection（ConfigurationManager.ConnectionStrings [ConnectionStringName]。ConnectionString）;
DataSet dsData = new DataSet（）;
尝试
{
字符串sqlString =select top 5 \\\
+
b.name，COUNT（codAmount）as ca \\ n+
作为c，分支为b，\ n+
CODConsignmentDetail_New as cn\\\
+
其中c.destination = b.BranchCode\\ \\ n+
and c.consignmentNumber = cn.consignmentNumber \\\
+
and c.consignerAccountNo ='+ Session [AccountNo]。ToString（）+'\ n+
group by b.name\\\
+
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;
然后我创建了条形图，但它每一列的颜色都是蓝色。
我试图通过在数组中发送颜色来追加颜色，但它不起作用。 / p>
private void BindChart1（）
{
StringBuilder str = new StringBuilder（）;
DataTable dt = new DataTable（）;
尝试
{
dt = GetData（）;
$ b $ 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'，'寄售金额'）;
data.addRows（+ dt.Rows.Count +）;）;
string [] colors = {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：['+ colors [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数量'，颜色：['red'，'blue'，'yellow'，'green'，'black '，]）;
但每行只使用第一种颜色，例如每种颜色都会有红色。
解决方案
1. 配置选项是复数颜色 - - > 颜色：['red'，'blue'，'yellow'，'green'，'black']
然而，这个选项会为数据中的每个系列映射一种颜色，换句话说，如果你只有一列，那么你只有一个系列，
并且只有一种颜色
可以在相同的系列/列中设置具有不同颜色的行，
使用样式列角色 - > {role：'style'}
请参阅以下工作片段...
使用 颜色的 config选项，将数据放在单独的列中，
请参阅以下工作片段...
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.d raw（data，{bar：{groupWidth：'90％'}，colors：['red'，'blue'，'yellow'，'green'，'black']}）; }，packages：['corechart']}）;
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. 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>
这篇关于如何在Google条形图中为每列添加不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
