javascript - 未捕获类型错误 : fn is not a function in chart. js

Question

这是我第一次使用chart.js 进行线条聊天，它可以在我的本地主机上运行，​​但是当我将其上传到远程主机时，我发现折线图没有显示，所以我检查了元素并在安慰。请问可能是什么问题。

Uncaught TypeError: fn is not a function     chart.js:501

这是实现脚本

<div id="graph-container"><canvas id="testLine"></canvas></div>

<script src="js/Chart.js"></script>
<script>
/*GLOBAL OPTIONS*/
Chart.defaults.global = {
// Boolean - Whether to animate the chart
animation: true,

// Number - Number of animation steps
animationSteps: 60,
animationEasing: "easeOutQuart",

// Boolean - If we should show the scale at all
showScale: true,

// Boolean - If we want to override with a hard coded scale
scaleOverride: false,

// ** Required if scaleOverride is true **
// Number - The number of steps in a hard coded scale
scaleSteps: null,
// Number - The value jump in the hard coded scale
scaleStepWidth: null,
// Number - The scale starting value
scaleStartValue: null,

// String - Colour of the scale line
scaleLineColor: "rgba(0,0,0,.1)",

// Number - Pixel width of the scale line
scaleLineWidth: 1,

// Boolean - Whether to show labels on the scale
scaleShowLabels: true,

// Interpolated JS string - can access value
scaleLabel: "<%=value%>",

// Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
scaleIntegersOnly: true,

// Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero: false,

// String - Scale label font declaration for the scale label
scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

// Number - Scale label font size in pixels
scaleFontSize: 12,

// String - Scale label font weight style
scaleFontStyle: "normal",

// String - Scale label font colour
scaleFontColor: "#666",

// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,

// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true,

// Boolean - Determines whether to draw tooltips on the canvas or not
showTooltips: true,

// Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
customTooltips: false,

// Array - Array of string names to attach tooltip events
tooltipEvents: ["mousemove", "touchstart", "touchmove"],

// String - Tooltip background colour
tooltipFillColor: "rgba(0,0,0,0.8)",

// String - Tooltip label font declaration for the scale label
tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

// Number - Tooltip label font size in pixels
tooltipFontSize: 14,

// String - Tooltip font weight style
tooltipFontStyle: "normal",

// String - Tooltip label font colour
tooltipFontColor: "#fff",

// String - Tooltip title font declaration for the scale label
tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

// Number - Tooltip title font size in pixels
tooltipTitleFontSize: 14,

// String - Tooltip title font weight style
tooltipTitleFontStyle: "bold",

// String - Tooltip title font colour
tooltipTitleFontColor: "#fff",

// Number - pixel width of padding around tooltip text
tooltipYPadding: 6,

// Number - pixel width of padding around tooltip text
tooltipXPadding: 6,

// Number - Size of the caret on the tooltip
tooltipCaretSize: 8,

// Number - Pixel radius of the tooltip border
tooltipCornerRadius: 6,

// Number - Pixel offset from point x to tooltip edge
tooltipXOffset: 10,

// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",

// String - Template string for multiple tooltips
multiTooltipTemplate: "<%= value %>",

// Function - Will fire on animation progression.
onAnimationProgress: function(){},

// Function - Will fire on animation completion.
onAnimationComplete: function(){},

}



/*LINE CHART    */    
var lineData = {
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September",  "October", "November", "December"],
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: <?php echo (json_encode($allquery)); ?>
    },
    {
        label: "Paid",
        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: <?php echo (json_encode($monthpaid)); ?>
    },
    {
        label: "Debt",
        fillColor: "rgba(240,216,216,0.2)",
        strokeColor: "rgba(240,216,216,1)",
        pointColor: "rgba(240,216,216,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(240,216,216,1)",
        data: <?php echo (json_encode($monthdebt)); ?>
    }
]
};

        var testChart = document.getElementById('testLine').getContext('2d');
        var myLineChart = new Chart(testChart).Line(lineData);
        myLineChart.options.responsive = false;
        $("#testLine").remove();
        $("#graph-container").html("<canvas id='testLine'></canvas>");
        var testChart1 = document.getElementById('testLine').getContext('2d');
        var myLineChart1 = new Chart(testChart1).Line(lineData);

Answer 1

我也遇到了同样的问题，但是这个 answer to an identical question: Uncaught TypeError 帮我修好了我的。声明新对象时，尝试拆分全局配置，而不是清除所有全局值。相反，像这样单独声明变量......

Chart.defaults.global.animation = true;
Chart.defaults.global.animationSteps = 60;
Chart.defaults.global.animationEasing = "easeOutQuart";
Chart.defaults.global.showScale = true;
Chart.defaults.global.scaleOverride = false;
Chart.defaults.global.scaleSteps = null;
Chart.defaults.global.scaleStepWidth = null;
Chart.defaults.global.scaleStartValue = null;
Chart.defaults.global.scaleLineColor = "rgba(0,0,0,.1)";
Chart.defaults.global.scaleLineWidth = 1;
Chart.defaults.global.scaleShowLabels = true;
Chart.defaults.global.scaleLabel = "<%=value%>";
Chart.defaults.global.scaleIntegersOnly = true;
Chart.defaults.global.scaleBeginAtZero = false;
Chart.defaults.global.scaleFontFamily = "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
Chart.defaults.global.scaleFontSize = 12;
Chart.defaults.global.scaleFontStyle = "normal";
Chart.defaults.global.scaleFontColor = "#666";
Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = true;
Chart.defaults.global.showTooltips = true;
Chart.defaults.global.customTooltips = false;
Chart.defaults.global.tooltipEvents = ["mousemove", "touchstart", "touchmove"];
Chart.defaults.global.tooltipFillColor = "rgba(0,0,0,0.8)";
Chart.defaults.global.tooltipFontFamily = "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
Chart.defaults.global.tooltipFontSize = 14;
Chart.defaults.global.tooltipFontStyle = "normal";
Chart.defaults.global.tooltipFontColor = "#fff";
Chart.defaults.global.tooltipTitleFontFamily = "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
Chart.defaults.global.tooltipTitleFontSize = 14;
Chart.defaults.global.tooltipTitleFontStyle = "bold";
Chart.defaults.global.tooltipTitleFontColor = "#fff";
Chart.defaults.global.tooltipYPadding = 6;
Chart.defaults.global.tooltipXPadding = 6;
Chart.defaults.global.tooltipCaretSize = 8;
Chart.defaults.global.tooltipCornerRadius = 6;
Chart.defaults.global.tooltipXOffset = 10;
Chart.defaults.global.tooltipTemplate = "<%if (label){%><%=label%>: <%}%><%= value %>";
Chart.defaults.global.multiTooltipTemplate = "<%= value %>";
Chart.defaults.global.onAnimationProgress = function() {};
Chart.defaults.global.onAnimationComplete = function() {};