CanvasJS转换在MeteorJS中不起作用

时间:2016-04-14 19:32:50

标签: meteor canvasjs

我正在尝试将基本的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
            }]
        };   
};

1 个答案:

答案 0 :(得分:0)

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

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

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