我试图自定义谷歌柱形图以从控制器添加我自己的数据。我找到了简单的解决方案,但如果有人知道更好的方法,我很乐意修改我的代码。
假设我们从https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart复制代码
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width:50%;float:left"></div>
所以我想修改的第一个想法是显示类别名称和订单数量。解决方案很简单,我只是删除了 Expensed 所以它看起来像这样:
['Category', 'Orders'],
['2004', 1000,],
['2005', 1170, ],
['2006', 660, ],
['2007', 1030, ]
但这些是硬编码数据,我想从我的数据库中获得我自己的类别名称和订单名称。
我在控制器自定义字符串中创建,然后将其传递给脚本。
控制器:
foreach (var d in model.DinerCategoryOrders) // Build string for google chart js
{
// ['Pre-School', 1000], Template
GoogleOrdersCount += "['" + d.CategoryName + "', " + d.OrdersCount + "],";
}
model.OrdersForGoogleChart = "google.visualization.arrayToDataTable([['Category', 'Orders']," + GoogleOrdersCount +" ]);";
return model;
在视图中
我简单地用我在控制器中构建的字符串替换了数据变量定义:
@Html.Raw(Model.OrdersForGoogleChart)
所以最终构建看起来像这样:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = @Html.Raw(Model.OrdersForGoogleChart)
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
我发现 Asp.Net MVC 中的 Razor 可以与 js 对话,并且 js 会消化通过 razor 传递的字符串而没有任何问题,这让我很惊讶。
如果您找到更好的解决方案,相信常见问题,请告诉我们!