我正在使用ASP.NET MVC3, Razor, jQuery Mobile
,并具有一些调用Google Chart API
的java scripts
,以绘制条形图(可视化API)。它在桌面浏览器上运行良好,但在Android浏览器中出现奇怪错误而失败。
"无法读取null的属性‘appendchild’。"
Java脚本代码位于"Body"元素内部。以下是代码:-我试着在没有母版页的情况下运行它,母版页包括jquery mobile script
文件,同样的行为,所以jquery mobile
不应该受到指责。
@model System.Collections.Generic.List<Insight.CloudWeb.ViewModels.KeyFigureViewModel>
@{
ViewBag.Title = "KeyFigures";
Layout = null;
}
google.load("visualization", "1", { packages: ["corechart","table"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
@foreach (var obj in Model)
{
@: data.addColumn('number', '@obj.Description @obj.Value');
}
i = 0;
data.addRows(1);
@foreach (var obj in Model)
{
@: data.setCell(0, i, @obj.Value);
@: i = i +1;
}
var chartBar = new google.visualization.BarChart(document.getElementById('chart_div'));
chartBar.draw(data, { height: 340, width: 500, title: 'Key Figures', chartArea: {left: 2, top: 2}, colors:['blue','red','green','yellow','orange','purple'],legend: 'right' });
}
</script>
<div id='chart_div'>
</div>
<div id='table_div'>
</div>
这是因为内置的Android浏览器不支持SVG。(这对我来说是个令人震惊的消息)。直到2.4 Gingerbread Android内置浏览器不支持SVG图像,谷歌可视化生成SVG图像。
SVG支持始于HoneyCombhttp://googlesystem.blogspot.com/2011/02/android-honeycombs-browser-supports-svg.html
直到Gingerbread,还不支持SVG图像:-http://www.mobilexweb.com/blog/android-2-3-gingerbread-the-browser
发现opera移动浏览器在android手机上以非常好的方式支持SVG,暂时也会向我的客户推荐。