Question

我尝试做的是使用chartjs创建条形图。数据通过$ .ajax检索。从$ .ajax检索的JSON数据将在稍后添加到数据集中。但是，当我即将创建一个chartjs时。 Chart.js库出错：

Uncaught TypeError: Cannot read property '0' of undefined

我在完成加载ajax后检查了所有数据。对于JSON没有问题（我已经检查过控制台）。此外，当我检查myBarChart类型时，报告为未定义。在我完成了对JSON数据的反复检查之后，我甚至已经为自己分配了一个新的chartjs。

这是一个JavaScript代码：

var driverCode, driverPointsGained = "";
var exLabel = new Array();
var exPoints = new Array();
var chartData;
var myBarChart;
var ctx = document.getElementById("driverStandingChart").getContext("2d");
//var ctx = $("#driverStandingChart").get(0).getContext("2d");

Chart.defaults.global.responsive = true;

function addChartData(codename, pointsgained) {
    chartData = {
        label: codename,
        datasets: [
            {
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,0.8)",
                highlightFill: "rgba(151,187,205,0.75)",
                highlightStroke: "rgba(151,187,205,1)",
                data: pointsgained
            }
        ]
    };
    return chartData;
}

$("#testAjaxLoading").click(function (e) {
    e.preventDefault();
    $.ajax({
        url: "http://ergast.com/api/f1/current/driverStandings.json",
        dataType: "json",
        success: function (data) {
            console.info(data);

            for (var i = 0; i <= data.MRData.total-1; i++) {

                driverCode = data.MRData.StandingsTable.StandingsLists[0].DriverStandings[i].Driver.code;
                driverPointsGained = data.MRData.StandingsTable.StandingsLists[0].DriverStandings[i].points;

                console.info("code: " + driverCode + " points: " + driverPointsGained);

                //push data to array
                exLabel.push(driverCode);
                exPoints.push(driverPointsGained);
            }

            addChartData(exLabel,exPoints);

            console.log(chartData);

            myBarChart = new Chart(ctx).Bar(chartData);

            alert("finished retrieve data");
        },
        error: function (err) {
            console.error(err);
        }
    });
});

包含HTML的完整代码：https://gist.github.com/sancowinx/31b6289b7f28908db0c1

对于JSON数据，我使用Ergast API中的API来获取JSON结果。

编辑：添加Stack Trace：

enter image description here $ .ajax.success实际上是myBarChart = new Chart(ctx).Bar(chartData);

有什么建议吗？提前谢谢。

Answer 1

您的堆栈跟踪告诉我ctx或chartData未定义。我的猜测是，如果你已经检查过chartData，那就是ctx。（使用console.log验证这一点。）如果是这种情况，也许这就是答案：canvas.getContext("2d") is undefined

如果不是这样，那么ChartJS在你的JSON中寻找的元素是未定义的。如果是这种情况，您必须查看文档以查看缺少哪些元素。

chartjs;无法读取未定义的属性“0”

1 个答案: