我正在尝试在页面加载时显示包含动态数据的Google图表。为了澄清起见,我使用的是webMatrix(asp.net,c#,sql db)。
我后面有C#代码,它每5分钟查询一次我的主数据库,并将数据存储在服务器数据库“目标”中。
我的目标是使用“目标”作为Google图表的数据源。我真的对Google图表文档感到困惑,因为所有示例都显示了带有硬编码数据的javascript代码。如何处理JavaScript,使其包含我的动态数据?
<script>
function initialize() {
var db = 'Target'
var query = new google.visualization.Query(db);
query.setQuery('select Problem group by Queue');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, {width: 400, height: 240, is3D: true});
}
</script>
最佳答案
我能够弄清楚这一点...
我没有意识到剃刀语法允许脚本中的代码隐藏变量。
C#
{
int a = 100;
int b = 350;
}
Java脚本
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
dataArray = [];
dataArray[0] = ['0', 'Title1', 'Title2'];
dataArray[1] = ['Element 1', @a, 0];
dataArray[2] = ['Element 2', 0, @b];
function drawChart() {
//var dt = new google.visualization.DataTable();
//dt.addRows(data);
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
title: 'Tickets',
vAxis: { titleTextStyle: { color: 'red'} },
backgroundColor: 'lightgray'
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
关于c# - 动态JavaScript C#Google图表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16875325/