CanvasJSの変換がMeteorJSで機能しない

リアルタイムのデータで構築されているアプリケーションにリアクティブチャートを追加できるように、基本的なCanvasJSスクリプトを流星フォーマットに変換しようとしています。しかし、コードを変換すると、レンダリング時に空白になります。この時点で、静的ビューを動作させるためにページを動的に更新する「タイマー」コードを削除しました。 template.renderedを使用してタイミングの面を作成する方法についてのヒントがあれば（試しても失敗しても）大丈夫です。CanvasJSの変換がMeteorJSで機能しない

HTMLとJS以下... http://canvasjs.com/docs/charts/how-to/creating-dynamic-charts/

index.htmlを@事前のおかげで

オリジナルコード：

<head> 
    <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>  
</head> 
<body> 
    {{> canvaschart}} 
</body> 

<template name="canvaschart"> 
    <div class="chartContainer" style="height: 300px; width: 600px;"></div> 
</template>

index.jsコード：

if (Meteor.isClient) { 

    Meteor.startup(
     function() { 
      new CanvasJS.Chart('.chartContainer', chartconfig); 
    }); 

    //var dps for dyno chart 
    var dps = [{x: 1, y: 10}, {x: 2, y: 10}, {x: 3, y: 10}, {x: 4, y: 10}, {x: 5, y: 10}]; //dataPoints. 

    var chartconfig = 
     { 
      title :{ 
       text: "Live Data" 
      }, 
      axisX: {       
       title: "Axis X Title" 
      }, 
      axisY: {       
       title: "Units" 
      }, 
      data: [{ 
       type: "line", 
       dataPoints : dps 
      }] 
     }; 
};

出典

2016-04-14 GVG

ますMeteor.startupにコードを実行します。このメソッドはテンプレートがレンダリングされる前に実行されるため、コンテナdivはまだDOMにはありません。テンプレートのonRenderedメソッドでコードを実行する必要があります。言い換えれば、

Template.canvaschart.onCreated(function() {...});

出典

2016-04-14 19:41:50

で

Meteor.startup(function() {...});

を置き換える私は、レンダリングを試していないが、それでも。 Chartistのチャートに、それが動作しているかどうかを調べるために追加しました（htmlのテンプレートを含む）。それはうまくいった。 CanvasJSチャートがレンダリングされないのは間違いですが、Firefoxで「Inspect Element」を表示すると表示されます。私はIEで試して、それもレンダリングしません。私が流星以外のhtmlファイルでまっすぐにjavascriptを実行すると、うまく動作します。今私はちょうど失われています... – GVG

私はそれを考え出しました...コードをTemplate.canvaschart.OnRenderedに移動しました...今はうまくいきます。 – GVG

CanvasJSの変換がMeteorJSで機能しない

答えて

関連する問題