0

我刚刚在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>
4

1 回答 1

0

我已经测试了您的第二个示例,它似乎按预期工作,因此您来自 Oracle 的数据可能有问题(格式、缺失值等)。您必须在那里进行一些 JS 调试。尝试添加断点以查看e[0]是什么以及为什么它没有K属性(或者为什么e是一个空数组)。

此外,EEA Daviz是一个集合了多个可视化框架(Google ChartsSimile Exhibit和不久的将来的Highcharts)的捆绑包,但您始终可以使用它的一个或多个组件而无需引入整个平面因此,您还应该尝试EEA谷歌图表。不要忘记,对于 Plone 4.2.x ,您需要collective.js.jqueryui < 1.9

克隆测试

于 2013-04-18T08:15:11.943 回答