我正在尝试在我的网页上显示2个Google图表。目前我可以毫无问题地显示一个。
当我试图在第一个图表下显示另一个图表时出现问题。
我的前端代码如下所示:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
</script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
url: 'MindYourMatterDash.aspx/GetData',
data: '{}',
dataType: "json",
success:
function (response) {
drawVisualization(response.d);
},
error: function (result) {
console.log(result);
alert("Please Contact Support with the following code in the subject :404 graph");
}
});
})
function drawVisualization(dataValues) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Column Name');
data.addColumn('number', 'Column Value');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
}
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, { title: "Broken PTP's Graph" });
}
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
url: 'MindYourMatterDash.aspx/GetDataFollowing',
data: '{}',
dataType: "json",
success:
function (response) {
drawVisualization(response.d);
},
error: function (result) {
console.log(result);
alert("Please Contact Support with the following code in the subject :404 graph");
}
});
})
function drawVisualization2(dataValues) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Column Name');
data.addColumn('number', 'Column Value');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
}
new google.visualization.PieChart(document.getElementById('FollowGraph')).
draw(data, { title: "Follow Ups Graph" });
}
</script>
和页面背后的代码:
[WebMethod]
public static List<Data> GetData()
{
string cat = "";
int val = 0;
DataTable dt = new DataTable();
cQuery _GraphInfo = new cQuery();
_GraphInfo.Sqlstring = "SQL Statement";
DataSet ds = _GraphInfo.SelectStatement();
dt = ds.Tables[0];
List<Data> datalist = new List<Data>();
foreach (DataRow dr in dt.Rows)
{
cat = dr[0].ToString();
val = Convert.ToInt32(dr[1]);
datalist.Add(new Data(cat, val));
}
return datalist;
}
[WebMethod]
public static List<Data> GetDataFollowing()
{
string cat = "";
int val = 0;
DataTable dt = new DataTable();
cQuery _GraphInfo2 = new cQuery();
_GraphInfo2.Sqlstring = "SQL Statement";
DataSet ds = _GraphInfo2.SelectStatement();
dt = ds.Tables[0];
List<Data> datalist2 = new List<Data>();
foreach (DataRow dr in dt.Rows)
{
cat = dr[0].ToString();
val = Convert.ToInt32(dr[1]);
datalist2.Add(new Data(cat, val));
}
return datalist2;
}
目前,当此代码运行时,它会加载第一个图形,然后将第一个图形替换为第二个图形,而不是将其加载到第二个div标记中。
非常感谢任何帮助。