無法鏈接外部JavaScript文件在帕格使用ChartJS

我想使用ChartJS，所以我可以在我的網站上顯示圖表，但我不希望JavaScript與HTML分離。我使用帕格（玉）作爲我的視圖引擎，我知道工作正常。無法鏈接外部JavaScript文件在帕格使用ChartJS

首先我聯繫ChartJS在我index.pug文件，並創建我的畫布：

html 
head 
    link(rel='stylesheet', href='/stylesheets/styles.css', type='text/css') 
    script(type="text/javascript", src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js') 
    script(type="text/javascript", src='/javascripts/chart.js') 
    title= title 
body 
    h1= message 
    canvas#myChart(width='400', height='400')

接下來，在我chart.js之文件，我所做的：

var ctx = document.getElementById("myChart").getContext('2d'); 
var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 2, 3], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
});

出於某種原因，圖表沒有被顯示，但是如果我使用腳本標記並將JavaScript直接放在帕格文件中，它可以正常工作。我知道JavaScript文件已正確鏈接，因爲我使用警報對其進行了檢查。關於爲什麼我的圖表沒有被顯示的任何想法？

來源

2017-05-29 Undying

添加您的代碼文件準備像這裏面：

$(document).ready(function() { 
    // your chart code goes here. 
});

來源

2017-05-29 15:25:09 iubema

無法鏈接外部JavaScript文件在帕格使用ChartJS

回答

相關問題