Question

我正在使用API编写代码。我需要为这些叫做票的东西创建一个折线图。我需要从API调用它们的信息。它有票证ID，日期和说明。对于标签，我有一个月的四个星期。如果我每周都不打电话，那么图表就不会显示出来。但是，当我这样做时，而不是弹出图表上的信息，警报会对每周的所有信息进行处理。

   var lineChartData = {
    labels: ["Week 1","Week 2","Week 3","Week 4"],
    datasets: [{
        label: "Tickets",
        fillColor: "rgba(100,200,244,0.2)",
        strokeColor: "rgba(100,200,244,1)",
        pointColor: "rgba(200,255,255,.7)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [$.get("http://velocity.data.wpengine.com:3000/tickets/", function(data){ alert(JSON.stringify(data));}).fail(function() {alert("FAIL");}), $.get("http://velocity.data.wpengine.com:3000/tickets/", function(data){ alert(JSON.stringify(data));}).fail(function() {alert("FAIL");}), $.get("http://velocity.data.wpengine.com:3000/tickets/", function(data){ alert(JSON.stringify(data));}).fail(function() {alert("FAIL");}), $.get("http://velocity.data.wpengine.com:3000/tickets/", function(data){ alert(JSON.stringify(data));}).fail(function() {alert("FAIL");}) ] };

如果您需要完整代码（包含CSS，HTML和JavaScript），click here。

Answer 1

$ .get不会像正常函数调用一样评估返回值。

从http://velocity.data.wpengine.com:3000/tickets/收到数据时，会调用您的回调函数。在你的情况下是

 function(data){ alert(JSON.stringify(data));}

您可以访问此回调函数中返回的data 。而你只是提醒它。这就是为什么你只是单独得到警报。您需要将图表绘图代码移动到此回调函数中。像

这样的东西

 window.onload = function () {
     $.get("http://velocity.data.wpengine.com:3000/tickets/list/", function(data){
        var lineChartData = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [{
                label: "My First dataset",
                fillColor: "rgba(100,200,244,0.2)",
                strokeColor: "rgba(100,200,244,1)",
                pointColor: "rgba(200,255,255,.7)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: data,
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(100,200,244,0)",
                strokeColor: "rgba(100,200,244,0)",
                pointColor: "rgba(200,255,255,0)",
                pointStrokeColor: "rgba(255,255,255,0)",
                pointHighlightFill: "#rgba(255,255,255,0)",
                pointHighlightStroke: "rgba(220,220,220,0)",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            }]
        };

        var ctx1 = document.getElementById("chart1").getContext("2d");
        window.myLine = new Chart(ctx1).Line(lineChartData, {
            showScale: false,
            pointDot: true,
            responsive: true

        });

        var ctx2 = document.getElementById("chart2").getContext("2d");
        window.myLine = new Chart(ctx2).Line(lineChartData, {
            responsive: true
        });

        ....

标签和数据（ChartJS）

1 个答案: