Question

我有两个选择设置会话变量，选择第二个后，加载图表。这种方法很好，直到我将新文档添加到集合中，该集合在编译数据集时充当各种关键的“索引”。这个新文档的文档有一个共同字段，用于生成无法呈现的数据集 - 该字段为“季节”。

图表不会直接显示集合，因为您会看到正在进行相当多的数据按摩（可能可以承受一些改进，但这不是我的问题）。

我的问题是，在插入具有常见“季节”字段的新文档后，数据集中使用的具有相同“季节”字段的任何其他文档会抛出getContext为null错误。具有不同“季节”字段的其他图表显示正常......直到我插入具有该“季节”字段的文档。如果我删除新近/最近插入的文档，图表再次呈现就好了。

下面列出了数据过载的道歉 - 我在这里傻眼了。

fyi，thisWeek.js：72来自下面的“redrawChart”函数：

var ctx  = document.getElementById("twChart").getContext("2d");

错误：

thisWeek.js:72 Uncaught TypeError: Cannot read property 'getContext' of null
at redrawChart (thisWeek.js:72)
at LocalCollection.Cursor.change #slateSelect (thisWeek.js:213)
at blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:3775
at Function.Template._withTemplateInstanceFunc (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:3744)
at Blaze.View.<anonymous> (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:3774)
at blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:2617
at Object.Blaze._withCurrentView (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:2271)
at Blaze._DOMRange.<anonymous> (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:2616)
at HTMLSelectElement.<anonymous> (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:863)
at HTMLDivElement.dispatch (jquery.js?hash=0c5fac3e4b18ec685e561deac3634fb49bc807e5:4722)

HTML：

<form class="form-inline">
        <div class="form-group">
            <label for="slateSsnSelect">Season/Tournament</label>
            <select name="sltSsn" id="slateSsnSelect" class="form-control">
                {{#each slateseason in slateseasons}}
                    <option value="{{slateseason.season}}">{{slateseason.season}}</option> 
                {{/each}}
            </select>
        </div>

        <div class="form-group">
            <label for="slateSelect">Slate</label>
            <select name="sltChrtSlct" id="slateSelect" class="form-control">
                <option>Select a Slate...</option>
                {{#each slate in slates}}
                    <option value="{{slate.slatename}}">{{slate.slatename}}</option> 
                {{/each}}
            </select>
        </div>
    </form>

模板事件：

'change #slateSsnSelect': function(){
    Session.set('slateSeason', $('#slateSsnSelect').val() );
},

'change #slateSelect': function(){
    $('#twChart').remove();
    $('.chrtDiv').append('<canvas id="twChart" class="img-responsive"></canvas>');

    Session.set('selectedSlate', $('#slateSelect').val() );

    var lg = Meteor.user().profile.lgName
    var ssn = Session.get('slateSeason');
    var slt = Session.get('selectedSlate');

    redrawChart();
}

模板助手：

slateseasons: function(){
    var ssnsQry = Seasons.find({},{sort: {createdAt:-1} }).fetch();
    if(ssnsQry.length > 0){
        Session.set('slateSeason', ssnsQry[0].season);
        return ssnsQry;
    } 
},

slates: function(){
    var sltSsn = Session.get('slateSeason');
    var sltsQry = Slates.find({season: sltSsn},{sort: {createdAt:-1} }).fetch();
    if(sltsQry.length > 0){
        Session.set('selectedSlate', sltsQry[0].slatename);
        return sltsQry;
    }
}

图表功能：

function redrawChart(){
$('#twChart').remove();
$('.chrtDiv').append('<canvas id="twChart" class="img-responsive"></canvas>');

var lg = Meteor.user().profile.lgName;
var lgType = Leagues.find({lgname: lg},{fields: {scoreType:1} }).fetch();
var players = _.uniq(Results.find({"league": lg}, 
                                {sort: {"user":1}}, 
                                {fields: {"user":1, _id:0}}).fetch().map(function(x) { return x.user;}), true );

var ssn = Session.get（'slateSeason'）; var slt = Session.get（'selectedSlate'）;

var dataset = Results.find（{“season”：ssn，“slate”：slt，“league”：lg}，{fields：{“user”：1，“pointsWon”：1}}，{sort ：{ “用户”：1}}）取（）;

var plyrsArr = _(dataset).groupBy('user');

var ptsArr = _(plyrsArr).map(function(g, key){
                    return { user: key,
                     pointsWon: _(g).reduce(function(m,x) { return m + x.pointsWon;}, 0) };
                    });


var labels = [], data=[];

    ptsArr.forEach(function(item) {
        labels.push(item.user);
        data.push(parseFloat(item.pointsWon));
    });


var totdata = {
    labels: labels,
    datasets: [{
        fillColor: "#E16B6B",                
        data: data
    }]
};

var options = {
    responsive: true,
    scaleBeginAtZero:true,
    maintainAspectRatio: false,
    barBeginAtOrigin:true
};

var ctx  = document.getElementById("twChart").getContext("2d");
    ctx.canvas.width = 300;
    ctx.canvas.height = 400;

new Chart(ctx).Bar(totdata, options);

}

Answer 1

经过几个小时的撞击砖墙，我终于意识到创建图表div的html中的辅助函数是问题所在。

在上面显示的html下方，我有：

{{#if chartExists}}
        <div class="chrtDiv">
            <canvas id="twChart" class="img-responsive"></canvas>
        </div>
        {{else}}
            <div>
                <h2> <img src="dunno.png" class="img-responsive" alt=""> No data...</h2>
            </div>
        {{/if}}

“chartExists”助手只是通过find（）过滤器“season”和“slate”检查是否有任何结果文档可用。我试图在那里显示一个gif，因为没有图表的数据。不确定为什么......我尝试使用生成的数据集来设置会话var，用于填充图表并让帮助程序检查，但这也不起作用。

我还将画布放在html的“else”部分，但也失败了。不知何故，助手不会让画布渲染......

带有图表js的Meteor只能在集合中的新文档后读取null的属性'getContext'吗？

1 个答案: