0

Google チャートを流星プロジェクトに実装しようとしています。特に、Meteor の Live HTML テクニックを使用して、データの変更時にグラフを自動更新したいと考えています。

適切に解決する方法がわからないという問題がいくつかあります。これらの問題に具体的に回答するよう求めているわけではありませんが、ベスト プラクティスの統合アプローチを探しています。問題を明確にするために問題を投稿するだけです：

1) Google チャートを作成するには、サイトにアタッチされた既存の dom 要素が常に必要です。このアプローチは、ドキュメントに添付する html フラグメントを宣言する Meteors アプローチでは適切に機能しません。フラグメントで Google チャートを作成しようとすると、要素がまだ存在しません。

2) 事前に dom 要素を作成してから (同じ ID で appendChild を使用して) 要素を更新すると、グラフは更新されますが、更新のたびになぜか大きくなります ?!?

3) 単一の div (例: id = "chartDiv") を含む HTML でテンプレート (例: name = "chartContainer") を宣言できる場合は、HTML でこのテンプレートを直接参照し、JavaScript でライブ HTML フラグメントを作成します (たとえば Template.chartContainer = Meteor.ui.render(...)) が更新されますか? 私にとってこれは機能しません...これが私の問題に対処するための正しいアプローチであるかどうかはわかりません。

ベストプラクティスに関するアドバイス/例は素晴らしいでしょう。

THXピーター

4

1 に答える 1

1

必要な dom 要素 (チャート コンテナー) が画面に表示されるまで、チャートの初期化を延期できます。

<template name="chart">
  <div id="chart"></div>
  {{init}}
</template>

そしてJS：

Template.chart.init = function() {
  Meteor.defer(function(){
    // Chart initialization code goes here...
  });
}

これは、必要に応じて init 関数を呼び出すことで可能だと思いますが、ライブで変化するデータの問題には対処していません。

于 2012-08-16T14:02:33.863 に答える