我刚刚在Google Visualization group中发布了这个,但我想我也会向 Plone 社区寻求帮助。
我正在使用 Plone 4.2.4 并希望通过 cx_Oracle 将 Google Charts 与 Oracle 后端集成。已经有一个非常好的包,叫做EEA.Daviz。然而,这远远超出了我的需要,我认为我可以自己完成,所以我创建了一些页面模板和包装 Javascript 的 Python 代码。在我的笔记本电脑(Mac OS X)上一切正常。
但是,一旦我将它推送到我的服务器 (SLES 10),BarCharts 就停止了工作。我只测试了条形图、折线图和动态图。我得到的只是一个红色错误框,上面写着“e[0].K 未定义”。谷歌搜索后,我发现我的问题有一个非常相似的描述,表明这是一个谷歌可视化错误,解决方法是更改宽度和高度属性。但是,更改高度或宽度并没有解决它。非常奇怪的是,如果我从 BarChart 页面复制示例 JS 并将其复制到 vanilla Zope 页面模板中,它就可以正常工作。但是,一旦我将它包装在主模板中,我就会再次收到红色错误消息。
所以我很困惑。我的笔记本电脑上安装了相同的主题,它没有给我任何问题。我知道我可以在服务器上显示条形图,而无需在香草页面模板中使用主题。
谁能指出我正确的方向?
有效的 ZPT:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['COUNTRY', ' COUNT'],
['Austria', 19],
['Belgium', 73],
['Bulgaria', 20]]
); var options = {
title: 'Test Bar Chart'}; var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 1000px;"></div>
</body>
</html>
不工作的 ZPT:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
lang="en"
metal:use-macro="context/main_template/macros/master"
i18n:domain="plone">
<metal:main fill-slot="javascript_head_slot">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['COUNTRY', ' COUNT'],
['Austria', 19],
['Belgium', 73],
['Bulgaria', 20]]
); var options = {
title: 'Test Bar Chart'}; var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);}
</script>
</metal:main>
<body>
<metal:main fill-slot="main">
<tal:main-macro metal:define-macro="main">
<div id="chart_div" style="width: 900px; height: 1000px;"></div>
</tal:main-macro>
</metal:main>
</body>
</html>