これをGoogle ビジュアライゼーション グループに投稿したところですが、Plone コミュニティにも助けを求めようと思いました。
私は Plone 4.2.4 を使用しており、cx_Oracle を介して Google チャートを Oracle バックエンドと統合したいと考えていました。EEA.Davizという非常に優れたパッケージが既にあります。しかし、それは私が必要とする以上のものであり、自分でできると思ったので、いくつかのページ テンプレートと Javascript をラップする Python コードを作成しました。私のラップトップ(Mac OS X)では、すべて正常に機能しました。
ただし、サーバー (SLES 10) にプッシュすると、BarCharts が機能しなくなりました。棒グラフ、折れ線グラフ、およびモーション チャートのみをテストしました。「e[0].K is undefined」という赤いエラー ボックスが表示されるだけです。グーグルで調べたところ、Google ビジュアライゼーションのエラーであり、幅と高さのプロパティを変更することで修正できるという非常によく似た問題の説明が見つかりました。ただし、高さまたは幅を変更しても修正されませんでした。非常に奇妙なのは、サンプル JS を BarChart ページからコピーしてバニラ Zope ページ テンプレートにコピーすると、問題なく動作することです。ただし、マスター テンプレートでラップすると、赤いエラー メッセージが再び表示されます。
だから私は混乱しています。ラップトップに同じテーマをインストールしましたが、問題はありませんでした。バニラ ページ テンプレートのテーマなしでサーバーに BarCharts を表示できることはわかっています。
誰かが私を正しい方向に向けることができますか?
機能する 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>