带有图表的流星 js 无法仅在集合中的新文档之后读取空的属性"getContext"?

Question

我有两个选择来设置会话变量，在选择第二个后，将加载一个图表。这工作得很好，直到我向集合添加一个新文档，作为数据集编译中的关键"索引"。此新文档与生成不会呈现的数据集的文档有一个公共字段 - 该字段为"季节"。

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

我的问题是，在插入具有公共"季节"字段的新文档后，数据集中具有相同"季节"字段的任何其他文档都会抛出getContext为空错误。其他具有不同"季节"字段的图表显示得很好......直到我插入带有该"季节"字段的文档。如果我删除该新插入/最近插入的文档，图表将再次呈现良好。

为下面包含的数据过载道歉 - 我在这里目瞪口呆。

仅供参考，thisWeek.js：72来自下面的"重绘图表"功能：

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：{"user"：1}}(.fetch((;

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((过滤器"季节"和"slate"提供的结果文档。我试图通过在图表没有数据的情况下显示 gif 来变得可爱。不知道为什么...我尝试使用用于填充图表的结果数据集设置会话变量，并让助手检查它，但这也没有用。

我也把画布放在html的"else"部分，但这也失败了。不知何故，该助手不会让该画布呈现...