如何将 chart.js 折线图与把手一起使用？

Question

我正在学习 Handlebars，现在正尝试使用 handlebar 从 chartjs 库中实现折线图，但我无法弄清楚也没有关于该主题的教程或指南。这是我的代码，如果我在没有车把和静态数据的情况下尝试这样做，它可以工作，但如果有车把，它甚至不显示我的折线图。

这是我的template.html

<script id="lineChart" type="text/x-handlebars-template">
<div class="row">
  <div class="col-sm-12 col-md-2"> </div>
    <div class="col-sm-12 col-md-8"> 
      <canvas id="myChart" width="400" height="400"></canvas>
  </div>
  </div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var lineChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels:  {{chartData.Date}} //["08/05/2020", "08/06/2020", "08/07/2020", "08/08/2020"],
      datasets: [
        {
          label: "Order Amount",
          fill: false,
          lineTension: 0,
          borderColor: "#0d6efd",
          data:  {{chartData.Data}}  //[1500,2100, 3580, 2800],
        }
      ]
   } 
});
</script>
</script>

这是车把app.js

const chartData = {
    Dates:["05/08/2020", "05/09/2020", "05/10/2020"],
    Data: [1500, 1200, 1750]
};

let lineChart = $('#lineChart').html();
let lineChartScript = Handlebars.compile(lineChart);
let linehtml = lineChartScript(chartData);
$(document.body).append(linehtml);

Answer 1

const chartData = {
    Dates:["05/08/2020", "05/09/2020", "05/10/2020"],
    Data: [1500, 1200, 1750]
};

let lineChart = $('#lineChart').html();
let lineChartScript = Handlebars.compile(lineChart);
let linehtml = lineChartScript(chartData);
$(document.body).append(linehtml);

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels:  chartData.Dates, 
      datasets: [
        {
          label: "Order Amount",
          fill: false,
          lineTension: 0,
          borderColor: "#0d6efd",
          data:  [chartData.Data] 
        }
      ]
   } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>


<script id="lineChart" type="text/x-handlebars-template">

<div class="row">
  <div class="col-sm-12 col-md-2"> </div>
    <div class="col-sm-12 col-md-8"> 
      <canvas id="myChart" width="400" height="400"></canvas>
  </div>
  </div>
  </div>

</script>

如何将 chart.js 折线图与把手一起使用？

How do I use my chart.js line chart with handlebars?

html

javascript

handlebars.js

chart.js