Chartjs圖表沒有呈現與帕格模板

Question

我想使用chartjs呈現在帕格模板的圖表，但由於某種原因它不工作，任何人都可以看到我做錯了什麼？帕格文件加載得很好，但沒有圖表。這裏是我的哈巴狗模板：

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

你有兩個問題與您的代碼...

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