Question

我是这个饼图的新手。我尝试了所有可能的解决方案互联网。我在同一webapp文件夹中有单独的.js文件和html文件。我不知道我在哪里。请帮我解决这个问题问题。预先感谢。

我在控制台中创建新图表时出错

  piechart.js:48 Uncaught ReferenceError: Chart is not defined
        at drawPieChart (piechart.js:48)
        at validation (piechart.js:35)

这是我的html代码

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
<script type="text/javascript" src="piechart.js"></script>
</head>
<body>
<div>
<button onclick="makePieChart()">view to piechart</button>
</div>
<div>
<canvas id="chartContainer" style="height: 300px; width: 100%;margin-left: -313px;"></canvas>
</div>
</body>
</html>

这是我的pieChart.js代码

if (typeof jQuery === "undefined") {
    var script = document.createElement('script');
    script.src = 'http://code.jquery.com/jquery-latest.min.js';
    script.type = 'text/javascript';
    script.srcOne="https://canvasjs.com/assets/script/canvasjs.min.js";
    script.srcTwo="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
}

var details;
function makePieChart() {
    console.log("in");
    $.ajax({
        url : 'http://localhost:8085/restcall/rest/details',
        type : 'GET',
        cache : false,
        success : function(data) {
            console.log(data);
            details = data;
            validation(details);
        }
    });

}
function validation(details) {
    let pending = 0;
    let completed = 0;
    for (var i = 0; i < details.length; i++) {
        if (details[i].flag == 0) {
            pending++;
        } else {
            completed++;
        }
    }
    drawPieChart(pending, completed);
}
function drawPieChart(count1, count2) {

    var canvas = document.getElementById("chartContainer");
    var ctx = canvas.getContext("2d");
    var data = {
        datasets : [ {
            data : [ count1, count2 ],
            backgroundColor : [ "#F7464A", "#46BFBD" ]
        } ],
        labels : [ "Completed", "Pending" ]
    };
    var myNewChart = new Chart(ctx, {
        animationEnabled : true,
        title : {
            text : "status"
        },
        type : 'pie',
        data : data
    });
    canvas.onclick = function(evt) {
        var activePoints = myNewChart.getElementsAtEvent(evt);
        if (activePoints[0]) {
            var chartData = activePoints[0]['_chart'].config.data;
            var idx = activePoints[0]['_index'];

            var label = chartData.labels[idx];
            var value = chartData.datasets[0].data[idx];
            if (label === "Pending") {
                pendingList(sample);
            }

        }

    }
}
function pendingList(details) {
    var pList = [];
    var list = details;
    console.log(list);
    for (var i = 0; i < details.length; i++) {
        if (details[i].flag == "0") {
            pList.push(details[i].name);
        } else {
            //console.log(sample[i].name);
        }
    }

    console.log(pList);

}

图表未定义

0 个答案: