CanvasJS 转换在 MeteorJS 中不起作用答案

【问题标题】：CanvasJS conversion not working in MeteorJSCanvasJS 转换在 MeteorJS 中不起作用
【发布时间】：2016-04-14 19:32:49
【问题描述】：

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

【问题讨论】：

标签： meteor canvasjs

【解决方案1】：

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

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

与

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

【讨论】：

我试过了，还是没有渲染。我在 Chartist 图表中添加以查看它是否正常工作（包括 html 中的模板）；它呈现得很好。奇怪的是 CanvasJS 图表没有呈现，但如果我在 Firefox 中“检查元素”，它就会出现。我在 IE 中尝试过，它也没有渲染。如果我在非流星 html 文件中直接使用 javascript，它就可以正常工作。现在我只是不知所措......
我想通了...将代码移到 Template.canvaschart.OnRendered...现在可以正常工作了。