Chart.js 与 handlebar.js 显示为空 canvas

Question

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

当我在 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 时，它起作用了。另一个图表使用 Numbers

//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);

Chart.js 与 handlebar.js 显示为空 canvas

Chart.js with handlebar.js shows empty canvas

canvas

handlebars.js

chart.js