如何在谷歌折线图中改变颜色..？ [英] How to change color in google line chart..?
问题描述
你好朋友..
我在我的应用程序中使用谷歌折线图..
i已经完成了它..但我想要改变线条的颜色..
你可以帮助我改变线条的颜色吗。
我的代码.cs：
Hello friends..
I am using google line chart in my application ..
i have done with it..But i want to change color of the lines..
Can u any help me how to change the color of a lines..
My code .cs:
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('string', '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: '',colors");
str.Append("hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}");
str.Append("}); }");
str.Append("</script>");
lt.Text = str.ToString().Replace('*', '"');
}
catch
{ }
}
}
推荐答案
只需将Colors属性添加到选项即可更改线条颜色。
Just Add theColorsproperties to theOptionto change the lines color.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
colors:['red','#004411','Black'],
axes: {
x: {
0: {side: 'top'}
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, options);
}
</script>
</head>
<body>
</body>
</html>
你好朋友我得到了上述问题的解决方案：
从数据库获取数据并在asp.net中创建谷歌折线图：
源代码：
< ; html xmlns =http：//www.w3 .org / 1999 / xhtml>
< head id =Head1runat =server>
< title>使用谷歌的多系列折线图可视化和LT; /标题>
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>
< / head>
< body>
<表格id =form1runat =server>
Hello Friends I got the solution for above problem :
getting data from database and creating google line chart in asp.net :
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">
< asp：literal id =ltrunat =serverxmlns：asp = #unknown>
<asp:literal id="lt" runat="server" xmlns:asp="#unknown">
< / form> ;
< / body>
< / html>
.cs代码：
public partial class _Default：System.Web.UI.Page
{
StringBuilder str = new StringBuilder（）;
//从web.config获取连接字符串
SqlConnection conn = new SqlConnection（Data source = ADMIN-PC \\SQLEXPRESS; Initial catalog = Rama; Integrated security = true）;
protected void Page_Load（对象发送者，EventArgs e）
{
if（！IsPostBack）
{
chart_bind（）;
}
}
私有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（）;
尝试
{
dt = GetData（）;
str.Append（@ < script type = text / javascript> google.load（* visualization *，* 1 *，{packages：[* corechart *]}）;
google.setOnLoadCallback（drawChart）;
函数drawChart（） {
var data = new google.visualization.DataTable（）;
data.addColumn（'string'，'Year'）;
data.addColumn（'number'，'Purchase'）;
data.addColumn（'number'，'Sales'）;
data.addColumn（'number'， '费用'）;
data.addRows（+ dt.Rows.Count +）;）;
Int32 i;
for（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] [buy]。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：599，height：400，color：'Green'，）;
str.Append（hAxis：{title：'Year'，titleTextStyle：{color：'red'}}，）;
str.Append（@系列：{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，}，
}）;
str.Append（}）; }）;
str.Append（< / script>）;
lt.Text = str.ToString（）。TrimEnd（'，'）。替换（'*'，''）;
}
catch
{}
}
}
</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("Data source=ADMIN-PC\\SQLEXPRESS; Initial catalog=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('string', 'Year');
data.addColumn('number', 'Purchase');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows(" + dt.Rows.Count + ");");
Int32 i;
for (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: 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,},
}");
str.Append("}); }");
str.Append("</script>");
lt.Text = str.ToString().TrimEnd(',').Replace('*', '"');
}
catch
{ }
}
}
这篇关于如何在谷歌折线图中改变颜色..？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
