CanvasJS 转换在 MeteorJS 中不起作用

Question

我正在尝试将基本的 CanvasJS 脚本转换为流星格式，以便我可以将反应图表添加到基于实时数据构建的应用程序。但是，当我转换代码时，它在呈现时显示为空白。此时，我删除了 "timer" 代码，该代码将动态更新页面以获取静态视图。如果您有关于如何使用 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
            }]
        };   
};

Answer 1

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

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

和

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

CanvasJS 转换在 MeteorJS 中不起作用

CanvasJS conversion not working in MeteorJS

meteor

canvasjs