2016-04-14 45 views
0

我想将一个基本的CanvasJS脚本转换为流星格式,这样我就可以将一个被动图表添加到正在建立在实时数据上的应用程序中。但是,当我转换代码时,它呈现时会呈现空白。此时,我删除了动态更新页面的“计时器”代码,以获得静态视图的工作。如果您有关于如何使用该模板的提示,则可以创建一个非常好的时间方面(尝试并失败)。提前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 
      }] 
     }; 
}; 

回答

0

你运行Meteor.startup中的代码。该方法在任何模板呈现之前执行,因此您的容器div尚未在DOM中。您需要执行模板的onRendered方法中的代码。换句话说,与

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

我试过,但仍然没有呈现替代

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

。我在Chartist图表中添加了它,看它是否正常工作(包括html中的模板);它很好。奇怪的是CanvasJS图表没有渲染,但是如果我在Firefox中“检查元素”,它就会出现。我尝试在IE中,它不会渲染。如果我只是在非流星html文件中直接使用javascript,它就可以工作。现在我只是在亏损... – GVG

+0

我想通了......将代码移入Template.canvaschart.OnRendered ...现在工作正常。 – GVG