Chartjsの図表がpugのテンプレートでレンダリングされていない

Question

chartjを使ってグラフをpugテンプレートでレンダリングしようとしていますが、何らかの理由でそれが機能していない場合、誰かが間違っているのを見ることができますか？ pugファイルはうまくロードされますが、そこにはグラフはありません。

div(class="main container-fluid text-center") 
    div(class="choices") 
     h2 
     p I'm voting for: 
     select(class="form-control") 
      option 1 
      option 2 
      option 3 
      option 4 
      option 5 
    div(class="chart")   
    canvas(id="chartPic" width="400" height="400") 
script(src="chart.js") 
script. 
    -window.onload(
    -var ctx = document.getElementById("chartPic").getContext('2d'); 
     -var chart = new Chart(ctx, { 
      -type: 'pie', 
      -data: { 
       -labels: ["red", "green", "blue"], 
       -datasets: [{ 
        -label: 'Number of votes', 
        -data: [1, 1, 1], 
        -backgroundColor: ['red', 'green', 'blue'], 
        -borderColor: ['green', 'blue', 'red'], 
        -borderWidth: 1 
       }], 
       }, 
      -options: { 
       -title: { 
        -display: true, 
        -text: "chart", 
       }, 
       -legend: { 
        -position: 'bottom' 
       }, 
      } 
     }); 
     ); 

Answer 1

あなたはあなたのコードを持つ2つの問題を持っている...

1：ここでは私のパグテンプレートです。構文エラーがあります。 dataオブジェクトの末尾に,を入れておく必要があります。

2。あなたは、文字列とカラー値を渡すことも

（彼らは事前に定義された変数がある場合を除き）、あなたはおそらく確認コードが前に実行されませんにするために、ウィンドウのonloadイベント内のチャート生成コードをラップする必要があり必要chart.jsスクリプトが正常に読み込まれます。また

div(class="main container-fluid text-center") 
    div(class="choices") 
     h2 
     p I'm voting for: 
     select(class="form-control") 
      option 1 
      option 2 
      option 3 
      option 4 
      option 5 
    div(class="chart")   
    canvas(id="chartPic" width="400" height="400") 
script(src="chart.js") 
script. 
    -window.onload = function() { 
    -var red="#{red}", green="#{green}", blue="#{blue}"; 
    -var ctx = document.getElementById("chartPic").getContext('2d'); 
     -var chart = new Chart(ctx, { 
      -type: 'pie', 
      -data: { 
       -labels: ["red", "green", "blue"], 
       -datasets: [{ 
        -label: 'Number of votes', 
        -data: [1, 1, 1], 
        -backgroundColor: [red, green, blue], 
        -borderColor: [green, blue, red], 
        -borderWidth: 1 
       }], 
       }, 
      -options: { 
       -title: { 
        -display: true, 
        -text: "chart", 
       }, 
       -legend: { 
        -position: 'bottom' 
       }, 
      } 
     }); 
     }; 

は、このworking chart demo on JSFiddle^生-jsから