Canvas 带有handlebar.js的Chart.js显示空画布

我正在尝试使用Handlebar.js结合Chart.js实现一些图表。到目前为止，我设法让两个图表工作，但第三个显示为一个空画布。我从上一个图中复制了代码，但即使这样，我也只能得到一个空画布。用硬编码数组替换数据和标签似乎也不起作用

当我在forEach循环中记录值时，它会打印正确的值，但当我尝试记录任何其他内容时，我会得到“undefined”。这是正常的JavaScript行为吗

起初，我认为这是一些变量在前面的图表中具有相同名称的结果。但是，由于这不会导致第一个和第二个图表之间出现问题，而且重命名变量仍然会导致问题，所以我放弃了这个想法

{{{#if roleSpread}
var ctx=document.getElementById（'roleChart'）；
var平均值=[]；
var角色=[]；
{{{#每一个角色}
var avg={{this.score}}；
平均推力（平均值）；
var role={{this.role}}；
角色。推（角色）；
{{/每个}}
风险值数据={
标签：角色，
数据集：[{
数据：平均数，
标签：“角色平均”，
背景颜色：“rgb（245146，37）”
}]
}
变量选项={
传说：错，
比例：{
雅克斯：[{
显示：对，
滴答声：{
贝吉纳泽罗：是的，
步长：10，
建议最大值：100
}
}]
},
动画：错误
};
var myBarChart=新图表（ctx{
类型：'bar'，
数据：数据，
选项：选项
});
{{/if}

在一些测试之后，我注意到当我用另一个图表的forEach替换forEach时，它是有效的。另一个图表使用数字

//This does not work
[
  { role: 'analyst', score: 34 },
  { role: 'manager', score: 27 },
  { role: 'other', score: 37 }
]

//This works
[
  { score: 26, count: 1 },
  { score: 28, count: 1 },
  { score: 34, count: 1 },
  { score: 37, count: 1 }
]

---

如果您的

角色

属性具有字符串值，则它将不起作用，这是正确的

这与使用手柄来生成可执行JavaScript有关

需要更新的代码是：

var role = {{this.role}};
roles.push(role);

此代码输出JavaScript。当

角色

值为数字时，输出如下所示：

var role = 26;
roles.push(role);

以上是完全有效的JavaScript。但是，当

role

为字符串时，输出变为：

var role = analyst;
roles.push(role);

由于

analyst

周围没有引号，JavaScript引擎认为它是变量的标识符，但由于找不到名为

analyst

的变量，因此抛出一个

由于我们需要

角色

值成为有效的JavaScript字符串，因此我们需要确保它们周围有引号。更新后的模板如下所示：

var role = "{{this.role}}";
roles.push(role);

将生成以下JavaScript：

var role = "analyst";
roles.push(role);

---

“…但当我尝试记录任何其他内容时，我会得到‘未定义’”。你还想记录什么？@76484我试着记录ctx对象、平均数数组和角色数组。所有这些都显示为未定义。这也发生在工作图表中，所以我假设这只是一些JavaScript行为，如果

ctx

是

未定义的
，我不知道它如何工作。这里没有足够的信息来确定为什么这不起作用。@76484我已经添加了一些我发现的更多信息。我认为这与数据的格式或forEach不正确有关（这似乎不太可能，因为它与我的其他图表遵循相同的模式）