Chartjs Diagramm nicht mit Mops Vorlage

Question

Ich versuche, Charts zu verwenden, um ein Diagramm in einem Mops-Vorlage zu rendern, aber aus irgendeinem Grund funktioniert es nicht, kann jemand sehen, was ich falsch mache? Die Mops-Datei lädt sich gut, aber es gibt kein Diagramm darauf. Hier ist meine Mops Vorlage:

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

Sie haben zwei Probleme mit dem Code ...

1. Es gibt einen Syntaxfehler! Sie müssen , nach dem Ende von data Objekt

2 setzen. Sie müssen die Farbwerte als String übergeben

auch (es sei denn, sie vordefinierte Variablen sind), sollten Sie wahrscheinlich das Diagramm erzeugt Code innerhalb eines Fensters onload Ereignis wickeln, um sicherzustellen, wird der Code nicht ausgeführt werden sollen, bevor Das Skript chart.js wurde erfolgreich geladen.

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' 
       }, 
      } 
     }); 
     }; 

auch, haben einen Blick auf diese working chart demo on JSFiddle^raw-js