如何在webpack中使用chart.js

how to use chart.js in webpack

本文关键字：chart js webpack      更新时间：2023-09-26

我在webpack中使用chart.js。当在终端运行webpack时，它是正常的，但在控制台显示错误:

"Uncaught ReferenceError: Chart is not defined"

require(['jquery', 'chartjs'], function($, chartjs) {
console.log('aaaaaaaa');
var riceData = {
    labels : ["January","February","March","April","May","June"],
    datasets :
     [
        {
          fillColor : "rgba(172,194,132,0.4)",
          strokeColor : "#ACC26D",
          pointColor : "#fff",
          pointStrokeColor : "#9DB86D",
          data : [203000,15600,99000,25100,30500,24700]
        }
     ]
    }
    var rice = document.getElementById('myChart').getContext('2d');
    new Chart(rice).Line(riceData);
});

给变量名chartjs给require.js的回调，但是你试图在倒数第二行用Chart引用chartjs。您需要做的是决定命名约定:

require(['jquery', 'chartjs'], function($, Chart) {
console.log('aaaaaaaa');
var riceData = {
    labels : ["January","February","March","April","May","June"],
    datasets :
     [
        {
          fillColor : "rgba(172,194,132,0.4)",
          strokeColor : "#ACC26D",
          pointColor : "#fff",
          pointStrokeColor : "#9DB86D",
          data : [203000,15600,99000,25100,30500,24700]
        }
     ]
    }
    var rice = document.getElementById('myChart').getContext('2d');
    new Chart(rice).Line(riceData);
});

通过将require更改为define来解决这个问题，并且您应该使用npm包管理器

define(['jquery', 'chartjs'], function($, chartjs) {
var riceData = {
    labels : ["January","February","March","April","May","June"],
    datasets :
     [
        {
          fillColor : "rgba(172,194,132,0.4)",
          strokeColor : "#ACC26D",
          pointColor : "#fff",
          pointStrokeColor : "#9DB86D",
          data : [203000,15600,99000,25100,30500,24700]
        }
     ]
    }
    var rice = document.getElementById('myChart').getContext('2d');
    new Chart(rice).Line(riceData);
});
相关文章：