如何更改Google Lina Chart的颜色..从数据库获取数据。？ [英] How Do I Change The Color For Google Lina Chart ..Getting Data From Database.?
本文介绍了如何更改Google Lina Chart的颜色..从数据库获取数据。？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好大家..
我已经开发了谷歌线图..我已经完成了它。
但问题是我想改变线条的颜色..？看到我的代码后，任何人都可以帮助我吗？
我从数据库中获取数据..
源代码：
< html xmlns = < span class =code-keyword> http://www.w3.org/1999/xhtml >
< head id = Head1 runat = server >
< title < / title >
< ; script type < span class =code-keyword> = text / javascript src = https://www.google.com/jsapi > < / script >
< / head >
< 正文 >
< 表格 id = form1 runat = 服务器 >
< div >
< asp：Literal ID = lt runat = 服务器 > < / asp ：Literal >
< div id = chart_div > < / div >
< / div >
< / form >
< / body >
< / html >
.cs代码：
public partial clas s _Default：System.Web.UI.Page
{
StringBuilder str = new StringBuilder（）;
//从web.config获取连接字符串
SqlConnection conn = new SqlConnection（server = ADMIN-PC\\SQLEXPRESS; database = rama; integrated security = true）;
protected void Page_Load（object sender，EventArgs e）
{
if（！IsPostBack）
{
chart_bind（）;
}
}
private DataTable GetData（）
{
DataTable dt = new DataTable（）;
conn.Open（）;
string cmd =select * from lines;
SqlDataAdapter adp = new SqlDataAdapter（cmd，conn）;
adp.Fill（dt）;
conn.Close（）;
返回dt;
}
private void chart_bind（）
{
DataTable dt = new DataTable（）;
try
{
dt = GetData（）;
str.Append（@< script 类型 = * text / javascript * > google.load（* visualization *，* 1 *，{packages：[* corechart *]}）;
google.setOnLoadCallback （drawChart）;
函数drawChart（）{
var data = new google.visualization.DataTable（）;
data.addColumn（'number'，'Year'）;
data.addColumn（'number'，'Purchase'）;
data.addColumn（'number'，'Sales'）;
data.addColumn（'number'，'Expenses'）;
data.addRows（+ dt.Rows.Count +）;）;
for（int i = 0; i < = dt.Rows.Count - 1; i ++）
{
str。追加（data.setValue（ + i + ， + 0 + ， + ' + dt.Rows [i] [year ] .ToString（） + '）;）;
str.Append（data.setValue（ + i + ， + 1 + ， + dt.Rows [i] [purchase]。ToString（） + ） ;）;
str.Append（data.setValue（ + i + ， + 2 + ， + dt.Rows [i] [sales]。ToString（） + ） ;）;
str.Append（data.setValue（ + i + ， + 3 + ， + dt.Rows [i] [expences ] .ToSt ring（） + ）;）;
}
str.Append（ var chart = new google.visualization.LineChart（document.getElementById（'chart_div '））;）;
// str.Append（ < span class =code-attribute> chart.draw（data， {width： 660， height： 400， title： ''，）;
str.Append（ chart.draw （data， {width： 660， height： 400，颜色： 'Green'，）;
str.Append（hAxis： {title： '年'， titleTextStyle： {color： 'red'}}）;
str.Append（}）; }）;
str.Append（< / script > < /跨度>）;
lt.Text = str.ToString（）。替换（'*'，''）;
}
捕获
{}
}
}
解决方案
您必须在此处添加此代码：
< br $> b $ b
str.Append（var chart = new google.visualization.LineChart（document.getElementById（'chart_div'））;） ;
str.Append（chart.draw（data，{width：599，height：400，color：'Green'，）;
str.Append（ hAxis：{title：'Year'，titleTextStyle：{color：'red'}}，）;
str.Append（@series：{0：{color：'＃676767' ，lineWidth：2，pointSize：10，dataOpacity：2.0，}，
1：{color：'＃00b0f0'，lineWidth：2，pointSize：10，dataOpacity：2.0，}，
2：{color：'＃000011'，lineWidth：2，pointSize：10，dataOpacity：2.0，}，
}）;
< blockquote>我会说你哈要更改此部分：
str.Append（ < span class =code-string> chart.draw（data，{width：660，height：400，color：'Green'，）;
str.Append（ hAxis：{title：'Year'，titleTextStyle：{color：'red' } ）;
或者如果可以的话，那会更好重写所有:)。因为您正在使用javascript客户端逻辑混合数据库访问。
hello everbody..
i have developed google line chart ..And i have done with it.
But the problem is i want to change color of the lines..? Can any one help me after seeing my code..?
I have taken data from database..
source code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Multi series Line chart using Google Visualization</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Literal ID="lt" runat="server"></asp:Literal>
<div id="chart_div"></div>
</div>
</form>
</body>
</html>
.cs code:
public partial class _Default : System.Web.UI.Page
{
StringBuilder str = new StringBuilder();
//Get connection string from web.config
SqlConnection conn = new SqlConnection("server=ADMIN-PC\\SQLEXPRESS;database=rama;integrated security=true");
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
chart_bind();
}
}
private DataTable GetData()
{
DataTable dt = new DataTable();
conn.Open();
string cmd = "select * from lines";
SqlDataAdapter adp = new SqlDataAdapter(cmd, conn);
adp.Fill(dt);
conn.Close();
return dt;
}
private void chart_bind()
{
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('number', 'Year' );
data.addColumn('number', 'Purchase');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows(" + dt.Rows.Count + ");");
for (int i = 0; i <= dt.Rows.Count - 1; i++)
{
str.Append("data.setValue( " + i + "," + 0 + "," + "'" + dt.Rows[i]["year"].ToString() + "');");
str.Append("data.setValue(" + i + "," + 1 + "," + dt.Rows[i]["purchase"].ToString() + ") ;");
str.Append("data.setValue(" + i + "," + 2 + "," + dt.Rows[i]["sales"].ToString() + ") ;");
str.Append("data.setValue(" + i + "," + 3 + "," + dt.Rows[i]["expences"].ToString() + ");");
}
str.Append(" var chart = new google.visualization.LineChart(document.getElementById('chart_div'));");
// str.Append(" chart.draw(data, {width: 660, height: 400, title: '',");
str.Append(" chart.draw(data, {width: 660, height: 400,color: 'Green',");
str.Append("hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}");
str.Append("}); }");
str.Append("</script>");
lt.Text = str.ToString().Replace('*', '"');
}
catch
{ }
}
} 解决方案
You Have to Add this code here:
str.Append(" var chart = new google.visualization.LineChart(document.getElementById('chart_div'));");
str.Append(" chart.draw(data, {width: 599, height: 400,color: 'Green',");
str.Append("hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},");
str.Append(@"series: {0:{color:'#676767',lineWidth:2, pointSize: 10,dataOpacity: 2.0, },
1:{color:'#00b0f0',lineWidth:2,pointSize: 10,dataOpacity: 2.0,},
2:{color:'#000011',lineWidth:2,pointSize: 10,dataOpacity: 2.0,},
}");
I would say that you have to change this part:
str.Append(" chart.draw(data, {width: 660, height: 400,color: 'Green',"); str.Append("hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}");
Or maybe if you can, it would be better to rewrite it all :). Because you are mixing database access with javascript client logic.
这篇关于如何更改Google Lina Chart的颜色..从数据库获取数据。？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
