Chartjs不會呈現圖表Requirejs

我想呈現使用Chartjs和Requirejs的圖表，但它無法呈現或提供錯誤消息。我知道我可能很疲倦，錯過了一些明顯的東西，但我似乎無法弄清楚。Chartjs不會呈現圖表Requirejs

線在我的HTML持有圖表畫布如下：

<canvas id="canvas" height="450" width="600"></canvas>

我Requirejs文件如下。正是在這裏，我懷疑這個問題：

require.config({ 
paths: { 
    jquery: "jquery-2.1.1.min", 
    bootstrap: "bootstrap.min", 
    chartjs: "Chart.min" 
}, 
shim: { 
    bootstrap: { 
     deps: ['jquery'], 
     exports: 'Bootstrap' 
    }, 
} 
}); 

requirejs(['bootstrap'], function (Bootstrap) { 
return {}; 
}); 


require(['chartjs'], function (Chart) { 
// Use Chart.js as normal here. 
var randomScalingFactor = function() { return Math.round(Math.random() * 100) }; 
var lineChartData = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      fillColor: "rgba(220,220,220,0.2)", 
      strokeColor: "rgba(220,220,220,1)", 
      pointColor: "rgba(220,220,220,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(220,220,220,1)", 
      data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] 
     }, 
     { 
      label: "My Second dataset", 
      fillColor: "rgba(151,187,205,0.2)", 
      strokeColor: "rgba(151,187,205,1)", 
      pointColor: "rgba(151,187,205,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(151,187,205,1)", 
      data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] 
     } 
    ] 

} 

window.onload = function() { 
    var ctx = document.getElementById("canvas").getContext("2d"); 
    window.myLine = new Chart(ctx).Line(lineChartData, { 
     responsive: true 
    }); 
} 
// Chart.noConflict restores the Chart global variable to it's previous owner 
// The function returns what was previously Chart, allowing you to reassign. 
var chartjs = Chart.noConflict(); 

});

來源

2014-10-18 Kode

如果您通過bower使用Chart.js，則版本已過時，*不支持RequireJS。從GitHub的最新版本，所以得到那一個。 – 2014-10-18 10:10:08

我從GitHub中取出了一個（這太棒了！在這個工具上做的很棒）。它必須是我如何調用它/加載它，因爲它不顯示爲被調用。每路易斯，我會嘗試jQuery的準備或需要domready – Kode 2014-10-18 14:12:39

如果任何人使用chart.js與angularjs使用requirejs然後請看看，http：//stackoverflow.com/questions/31288001/how-to-use-chart-js -with-angular-chart-using-requirejs – VBMali 2015-07-13 04:52:44

你描述的是與事件處理程序一致的，你給window.onload根本沒有被解僱。

當RequireJS開始執行require(['chartjs']調用中的代碼時，load事件很可能已經發生。你可以做的是使用像jQuery的ready或RequireJS'domReady。

順便說一句，這個代碼是離奇：

requirejs(['bootstrap'], function (Bootstrap) { 
return {}; 
});

如果你只是加載引導，你可以將其降低到requirejs(['bootstrap'])。但請注意，所有加載都是異步的，因此唯一的作用是告訴RequireJS加載Bootstrap，這將在未來某個不確定的時刻發生。

來源

2014-10-18 11:14:38 Louis

感謝您的澄清。我會嘗試準備好或準備好併發佈會發生的事情。 – Kode 2014-10-18 14:13:51

使用jQuery的document.ready訣竅 – Kode 2014-10-20 18:59:05

如果任何人使用chart.js與angularjs使用requirejs然後請看看，http://stackoverflow.com/questions/31288001/how-to-use-chart-js-with-角圖表-使用-requirejs – VBMali 2015-07-13 04:51:44

Chartjs不會呈現圖表Requirejs

回答

相關問題