Question

我尝试在我的机器上运行codepen（https://codepen.io/compwright/full/mmQMrZ/）中的Chartjs-plugin-annotation示例，但是插件注释部分并没有显示出来。我在Firefox中测试过，并在安全模式下再次测试以确定。

控制台输出：

TypeError: Chart is undefined[Learn More]

chartjs-plugin-annotation.js:468:1

[6]<

https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5
/chartjs-plugin-annotation.js:468:1

s

https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5
/chartjs-plugin-annotation.js:10:246

e

https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5
/chartjs-plugin-annotation.js:10:425

<anonymous>

https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5
/chartjs-plugin-annotation.js:10:11

这是annotation.js的第467和468行：

// Configure plugin namespace
Chart.Annotation = Chart.Annotation || {};

这是第10行：

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

我的代码与codepen完全相同，但这只是以防万一：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chartjs Testing</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/chartjs/Chart.js/master/samples/utils.js"></script>

</head>
<body>
    <h1>My Chart</h1>
    <canvas id="canvas" width="400" height="200"></canvas>
    <script>
        var chartData = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [{
                type: 'line',
                label: 'Dataset 1',
                borderColor: window.chartColors.blue,
                borderWidth: 2,
                fill: false,
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor()
                ]
            }, {
                type: 'bar',
                label: 'Dataset 2',
                backgroundColor: window.chartColors.red,
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor()
                ],
                borderColor: 'white',
                borderWidth: 2
            }, {
                type: 'bar',
                label: 'Dataset 3',
                backgroundColor: window.chartColors.green,
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor()
                ]
            }]
        };
        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myMixedChart = new Chart(ctx, {
                type: 'bar',
                data: chartData,
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Chart.js Combo Bar Line Chart'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: true
                    },
                    annotation: {
                        events: ['click'],
                        annotations: [{
                            drawTime: 'afterDatasetsDraw',
                            id: 'hline',
                            type: 'line',
                            mode: 'horizontal',
                            scaleID: 'y-axis-0',
                            value: randomScalingFactor(),
                            borderColor: 'black',
                            borderWidth: 5,
                            label: {
                                backgroundColor: "red",
                                content: "Test Label",
                                enabled: true
                            },
                            onClick: function (e) {
                                // The annotation is is bound to the `this` variable
                                console.log('Annotation', e.type, this);
                            }
                        }, {
                            drawTime: 'beforeDatasetsDraw',
                            type: 'box',
                            xScaleID: 'x-axis-0',
                            yScaleID: 'y-axis-0',
                            xMin: 'February',
                            xMax: 'April',
                            yMin: randomScalingFactor(),
                            yMax: randomScalingFactor(),
                            backgroundColor: 'rgba(101, 33, 171, 0.5)',
                            borderColor: 'rgb(101, 33, 171)',
                            borderWidth: 1,
                            onClick: function (e) {
                                console.log('Box', e.type, this);
                            }
                        }]
                    }
                }
            });
        };
        </script>
</body>
</html>

Chartjs插件注释示例无法正常工作

0 个答案: