Chart.js和handlebar.js显示空白画布

Question

我正在尝试使用Handlebar.js与Chart.js结合来实现一些图表。到目前为止，我设法获得了2个图表，但第三个图表显示为一块空白画布。我从上一张图复制了代码，但即使如此，我还是得到了一块空白画布。用硬编码数组替换数据和标签似乎也不起作用。

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

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

    {{#if roleSpread}}
    <section class="overallResult" style="background-color: #fff7ea;">

        <div style="display: flex; justify-content: center; width: 100%; vertical-align: top; color: grey;">

            <canvas id="roleChart" width="1000px" height="500px"></canvas>

            <script>
                var ctx = document.getElementById('roleChart');

                var averages = [];
                var roles = [];
                {{#each roleAvg}}
                    var avg = {{this.score}};
                    averages.push(avg);
                    var role = {{this.role}};
                    roles.push(role);
                {{/each}}


                var data = {
                    labels: roles,
                    datasets: [{
                        data: averages,
                        label: "Role average",
                        backgroundColor: 'rgb(245, 146, 37)'
                    }]
                }
                  var options = {
                    legend: false,
                    scales: {
                        yAxes: [{
                            display: true,
                            ticks: {
                                beginAtZero: true,
                                stepSize:10,
                                suggestedMax:100
                            }
                        }]
                    },
                    animation: false
                };
                var myBarChart = new Chart(ctx, {
                    type: 'bar',
                    data: data,
                    options: options
                });

            </script>
        </div>
    </section>
    {{/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 }
]

Answer 1

如果您的role属性具有字符串值，那么您将无法使用它是正确的。

这与您使用Handlebars生成可执行JavaScript的事实有关。

需要更新的代码是：

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

此代码输出JavaScript。当role值为数字时，输出如下所示：

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

以上是完全有效的JavaScript。但是，当role是字符串时，输出变为：

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

由于analyst周围没有引号，因此JavaScript引擎认为它是变量的标识符，但由于找不到名为analyst的变量，因此抛出Reference Error。

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

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

将产生以下JavaScript：

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