2017-04-08 103 views
1

我有兩個JavaScript文件baseChart.js和chart.min.js。我不想將我的chart.min.js包含到index.html文件中。我只想在我的index.html中包含baseChart.js。如何從另一個js文件回調一個js文件?

`var s = document.createElement("script"); 
s.setAttribute("src","js/Chart.min.js"); 
document.head.appendChild(s); 

class BaseChart{ 

    constructor(area, settings) { 

     this.area = area; 
     this.settings = settings; 
    } 
    a() { 
     new Chart(this.area, this.settings); 
     console.log("BaseChart"); 
    } 
} 


class BarChart extends BaseChart { 
    constructor(area, settings) { 
     super(area, settings); 
    } 
    /* constructor(ctx) { 
     var data = { 
      labels: ["January", "February", "March", "April", "May", "June", "July"], 
      datasets: [ 
       { 
        label: "My First dataset", 
        fill: false, 
        lineTension: 0.1, 
        backgroundColor: "rgba(75,192,192,0.4)", 
        borderColor: "rgba(75,192,192,1)", 
        borderCapStyle: 'butt', 
        borderDash: [], 
        borderDashOffset: 0.0, 
        borderJoinStyle: 'miter', 
        pointBorderColor: "rgba(75,192,192,1)", 
        pointBackgroundColor: "#fff", 
        pointBorderWidth: 1, 
        pointHoverRadius: 5, 
        pointHoverBackgroundColor: "rgba(75,192,192,1)", 
        pointHoverBorderColor: "rgba(220,220,220,1)", 
        pointHoverBorderWidth: 2, 
        pointRadius: 1, 
        pointHitRadius: 10, 
        data: [65, 59, 80, 81, 56, 55, 40], 
        spanGaps: false, 
       }, 
       { 
        label: "Second", 
        data: [12, 56, 45, 23, 78, 23, 90], 
       } 
      ] 
     }; 
     var lineChart = new Chart(ctx, { 
      type: 'line', 
      data: data 
     }); 
    } */ 
    b() { 
     super.a(); 
    } 
}` 

目前,這是baseChart.js文件,當我試圖運行這段代碼,我得到錯誤「圖表沒有定義的,因爲我使用的「新圖(this.area,this.settings) ;」在我調用這個方法之前,chart.min.js沒有被初始化。「我想在初始化這些類和方法之前初始化chart.min.js。我使用了chart.js庫。所以我該怎麼做?

+0

爲什麼你不這樣做在構造函數?創建新對象時調用構造函數。 –

+0

您可以通過AJAX加載文件,但在開始使用「Chart」之前,您必須等待文件加載。或者,您可以將兩個文件連接成一個文件'bundle.js'並僅包含在'index.html'文件中 –

回答

0

我建議你通過NPM安裝chart.js之

npm install chart.js --save 

,然後導入這樣的:

// ES6

import Chart from 'chart.js'; 

我假設你正在使用一些類似webpack的打包工具可以使代碼在上面工作。如果沒有,你必須在你的索引文件中包含chart.min.js之前baseChart.js

+0

導入在任何瀏覽器中都不起作用,並且我無法使用node.js –

+0

這就是爲什麼您應該使用webpack + babel來使其工作。 –

相關問題