如何將 chart.js 折線圖與車把一起使用？

Question

我正在學習 Handlebars，現在嘗試從帶有把手的 chartjs 庫中實現折線圖，但我也無法弄清楚這個主題也沒有教程或指南。 這是我的代碼，如果我在沒有車把和 static 數據的情況下嘗試這個，它可以工作，但使用車把它甚至沒有顯示我的折線圖。

這是我的模板。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>