我正在尝试将基本的CanvasJS脚本转换为流星格式,以便我可以将响应图表添加到基于实时数据构建的应用程序中。但是,当我转换代码时,渲染时它会变为空白。此时,我删除了"计时器"代码,它将动态更新页面,以使静态视图生效。如果你有关于如何使用template.rendered的提示来创建很好的时序方面(尝试也失败了)。
下面的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 :(得分:0)
您在Meteor.startup
中运行代码。该方法在呈现任何模板之前执行,因此您的容器div尚未在DOM中。您需要在模板的onRendered
方法中执行代码。换句话说,替换
Meteor.startup(function() {...});
与
Template.canvaschart.onCreated(function() {...});