无法将 JSON API 数据传递给 Chart JS

问题描述 投票：0回答：1

所以我不太擅长获取数据，这几天我迷失了方向并苦苦挣扎 -_- 如果有人可以帮助我，我会很感激。

我的代码获取和读取数据非常好，并将其传递到 html 表，但我无法将其传递到图表......我很困惑）

这是我的代码

function loadReport() {
    
    var dateFrom = document.getElementById("date1").value.toString();
        var dateTo = document.getElementById("date2").value.toString();
        var apiurl = "<?php echo $user->getFromTable_MyId("integration_api", "users"); ?>";
        var pubID = "<?php echo $user->getFromTable_MyId("id", "users"); ?>";
    
        $.getJSON(apiurl + '&Target=Affiliate_Report&Method=getStats&fields[]=Stat.affiliate_info1&fields[]=Stat.payout&fields[]=Stat.conversions&fields[]=Stat.clicks&filters[Stat.affiliate_info1][conditional]=EQUAL_TO&filters[Stat.affiliate_info1][values]=pop_24&filters[Stat.date][conditional]=BETWEEN&filters[Stat.date][values][]=' + dateFrom + '&filters[Stat.date][values][]=' + dateTo + '&sort[Stat.date]=desc', function(data) {
     //if you want to add more on balance just enter number in value
     
     values9=[0]
     values8=[0]
     values7=[0]
    var data, id, conversion, clicks, payout, statDate = "";
    var id = '';
        var clicks = '';
        var conversion = '';
        var payout = '';
        
    for (i in data.response.data.data) {
        
       const chartDateArr = data.response.data.data[i].Stat.date;
        const chartClicksArr = data.response.data.data[i].Stat.clicks;
        console.log(chartClicksArr);
        const chartConversionsArr = data.response.data.data[i].Stat.conversions;
        const chartPayoutArr = data.response.data.data[i].Stat.payout;
                 
        
        statDate += "<table><tr><td>" + data.response.data.data[i].Stat.date + "</td></tr></table>";
    id += "<table><tr><td>" + data.response.data.data[i].Stat.affiliate_info1 + "</td></tr></table>";
    conversion += "<table><tr><td>" + data.response.data.data[i].Stat.conversions + "</td></tr></table>";
    clicks += "<table><tr><td>" + data.response.data.data[i].Stat.clicks + "</td></tr></table>";
    
    var num9 = parseFloat(data.response.data.data[i].Stat.payout);
    var num8 = parseFloat(data.response.data.data[i].Stat.clicks);
    var num7 = parseFloat(data.response.data.data[i].Stat.conversions);
    
    //This code will use percentage from db and read it here to reduce sum
    var percent = <?php echo '.' . $user->getFromTable_MyId("rev_percentage", "users"); ?>;
    var val = num9 - (num9 * percent);
    //this pushed data to values and calculate total sum
    values9.push(val)
    values8.push(num8)
    values7.push(num7)
    let total9=values9.reduce((acc,curr)=>acc+curr)
    let total8=values8.reduce((acc,curr)=>acc+curr)
    let total7=values7.reduce((acc,curr)=>acc+curr)
    document.getElementById("onLoadConversions").textContent=total7;
    document.getElementById("onLoadClicks").textContent=total8;
    document.getElementById("onLoadsum").textContent='\u20AC ' + total9.toFixed(2);
    //#
    //#
    //#
    payout += "<table><tr><td> &euro; " + val.toFixed(2) + "</td></tr></table>";
    
    document.getElementById("statDate").innerHTML = statDate;
    document.getElementById("id_name").innerHTML = id;
    document.getElementById("conversion_name").innerHTML = conversion;
    document.getElementById("clicks_name").innerHTML = clicks;
    document.getElementById("payout_name").innerHTML = payout;
    
    //Chart code START
    if (myChart3) myChart3.destroy(); //this line will avoid chart error when calling  function again
var ctx3 = $("#line-chart").get(0).getContext("2d");
var myChart3 = new Chart(ctx3, {
    type: "line",
    data: {
        labels: chartDateArr,
        datasets: [{
            label: "Revenue",
            fill: false,
            backgroundColor: "rgba(40, 153, 51, .3)",
            borderColor: "rgba(40, 153, 51, .7)",
            data: chartPayoutArr
        },
        {
            label: "Clicks",
            fill: false,
            backgroundColor: "rgba(0, 0, 0, .3)",
            borderColor: "rgba(0, 0, 0, .7)",
            data: chartClicksArr
        },
        {
            label: "Conversion",
            fill: false,
            backgroundColor: "rgba(161, 21, 21, .3)",
            borderColor: "rgba(161, 21, 21, .7)",
            data: chartConversionsArr
        }]
    },
    options: {
        responsive: true
    }
});

//Chart code END
    
};
});
    
    
    
}

这是结果输出的 SS： chart

table

console

这是 API 获取的 JSON 文本结果：

{
  "request": {
    "Target": "Affiliate_Report",
    "Format": "json",
    "Service": "HasOffers",
    "Version": "2",
    "api_key": "de52d0645f23810a3c6c8e470d3ae678f6bac643b2ed4a835328e22d368b7d0d",
    "Method": "getStats",
    "fields": [
      "Stat.affiliate_info1",
      "Stat.source",
      "Stat.affiliate_info5",
      "Stat.affiliate_info4",
      "Stat.affiliate_info3",
      "Stat.affiliate_info2",
      "Stat.payout",
      "Stat.conversions",
      "Stat.clicks"
    ],
    "filters": {
      "Stat.affiliate_info1": {
        "conditional": "EQUAL_TO",
        "values": "pop_24"
      },
      "Stat.date": {
        "conditional": "BETWEEN",
        "values": [
          "2024-02-01",
          "2024-04-15"
        ]
      }
    },
    "sort": {
      "Stat.date": "desc"
    },
    "_": "1713208372551"
  },
  "response": {
    "status": 1,
    "httpStatus": 200,
    "data": {
      "page": 1,
      "current": 50,
      "count": 7,
      "pageCount": 1,
      "data": [
        {
          "Stat": {
            "affiliate_info1": "pop_24",
            "source": "",
            "affiliate_info5": "",
            "affiliate_info4": "",
            "affiliate_info3": "",
            "affiliate_info2": "",
            "payout": "0.000000",
            "conversions": "0",
            "clicks": "7",
            "date": "2024-03-04"
          }
        },
        {
          "Stat": {
            "affiliate_info1": "pop_24",
            "source": "",
            "affiliate_info5": "",
            "affiliate_info4": "",
            "affiliate_info3": "",
            "affiliate_info2": "",
            "payout": "0.000000",
            "conversions": "0",
            "clicks": "27",
            "date": "2024-03-03"
          }
        },
        {
          "Stat": {
            "affiliate_info1": "pop_24",
            "source": "",
            "affiliate_info5": "",
            "affiliate_info4": "",
            "affiliate_info3": "",
            "affiliate_info2": "",
            "payout": "0.000000",
            "conversions": "0",
            "clicks": "72",
            "date": "2024-03-02"
          }
        },
        {
          "Stat": {
            "affiliate_info1": "pop_24",
            "source": "",
            "affiliate_info5": "",
            "affiliate_info4": "",
            "affiliate_info3": "",
            "affiliate_info2": "",
            "payout": "0.000000",
            "conversions": "0",
            "clicks": "2653",
            "date": "2024-03-01"
          }
        },
        {
          "Stat": {
            "affiliate_info1": "pop_24",
            "source": "",
            "affiliate_info5": "",
            "affiliate_info4": "",
            "affiliate_info3": "",
            "affiliate_info2": "",
            "payout": "0.000000",
            "conversions": "0",
            "clicks": "1",
            "date": "2024-02-29"
          }
        },
        {
          "Stat": {
            "affiliate_info1": "pop_24",
            "source": "",
            "affiliate_info5": "",
            "affiliate_info4": "",
            "affiliate_info3": "",
            "affiliate_info2": "",
            "payout": "0.000000",
            "conversions": "0",
            "clicks": "11",
            "date": "2024-02-28"
          }
        },
        {
          "Stat": {
            "affiliate_info1": "pop_24",
            "source": "",
            "affiliate_info5": "",
            "affiliate_info4": "",
            "affiliate_info3": "",
            "affiliate_info2": "",
            "payout": "0.000000",
            "conversions": "0",
            "clicks": "6",
            "date": "2024-02-26"
          }
        }
      ]
    },
    "errors": [],
    "errorMessage": null
  }
}

javascript arrays json
1个回答
0
投票

注意您的图表生成是在数据循环内。这就是为什么数据点是单个数字而不是数组。您需要将图表从循环中取出，并为其提供相应数据的数组（例如使用 

map
）。

const data = {
  "response": {
    "status": 1,
    "httpStatus": 200,
    "data": {
      "page": 1,
      "current": 50,
      "count": 7,
      "pageCount": 1,
      "data": [{
          "Stat": {
            "affiliate_info1": "pop_24",
            "source": "",
            "affiliate_info5": "",
            "affiliate_info4": "",
            "affiliate_info3": "",
            "affiliate_info2": "",
            "payout": "0.000000",
            "conversions": "0",
            "clicks": "7",
            "date": "2024-03-04"
          }
        },
        {
          "Stat": {
            "affiliate_info1": "pop_24",
            "source": "",
            "affiliate_info5": "",
            "affiliate_info4": "",
            "affiliate_info3": "",
            "affiliate_info2": "",
            "payout": "0.000000",
            "conversions": "0",
            "clicks": "27",
            "date": "2024-03-03"
          }
        },
        {
          "Stat": {
            "affiliate_info1": "pop_24",
            "source": "",
            "affiliate_info5": "",
            "affiliate_info4": "",
            "affiliate_info3": "",
            "affiliate_info2": "",
            "payout": "0.000000",
            "conversions": "0",
            "clicks": "72",
            "date": "2024-03-02"
          }
        },
        {
          "Stat": {
            "affiliate_info1": "pop_24",
            "source": "",
            "affiliate_info5": "",
            "affiliate_info4": "",
            "affiliate_info3": "",
            "affiliate_info2": "",
            "payout": "0.000000",
            "conversions": "0",
            "clicks": "2653",
            "date": "2024-03-01"
          }
        },
        {
          "Stat": {
            "affiliate_info1": "pop_24",
            "source": "",
            "affiliate_info5": "",
            "affiliate_info4": "",
            "affiliate_info3": "",
            "affiliate_info2": "",
            "payout": "0.000000",
            "conversions": "0",
            "clicks": "1",
            "date": "2024-02-29"
          }
        },
        {
          "Stat": {
            "affiliate_info1": "pop_24",
            "source": "",
            "affiliate_info5": "",
            "affiliate_info4": "",
            "affiliate_info3": "",
            "affiliate_info2": "",
            "payout": "0.000000",
            "conversions": "0",
            "clicks": "11",
            "date": "2024-02-28"
          }
        },
        {
          "Stat": {
            "affiliate_info1": "pop_24",
            "source": "",
            "affiliate_info5": "",
            "affiliate_info4": "",
            "affiliate_info3": "",
            "affiliate_info2": "",
            "payout": "0.000000",
            "conversions": "0",
            "clicks": "6",
            "date": "2024-02-26"
          }
        }
      ]
    }
  }
}

const chartDateArr = data.response.data.data.map(item => item.Stat.date);
const chartClicksArr = data.response.data.data.map(item => +item.Stat.clicks);
const chartConversionsArr = data.response.data.data.map(item => item.Stat.conversions);
const chartPayoutArr = data.response.data.data.map(item => item.Stat.payout);


//Chart code START
var ctx3 = $("#line-chart").get(0).getContext("2d");
var myChart3 = new Chart(ctx3, {
  type: "line",
  data: {
    labels: chartDateArr,
    datasets: [{
        label: "Revenue",
        fill: false,
        backgroundColor: "rgba(40, 153, 51, .3)",
        borderColor: "rgba(40, 153, 51, .7)",
        data: chartPayoutArr
      },
      {
        label: "Clicks",
        fill: false,
        backgroundColor: "rgba(127, 127, 127, .3)",
        borderColor: "rgba(127, 127, 127, .7)",
        data: chartClicksArr
      },
      {
        label: "Conversion",
        fill: false,
        backgroundColor: "rgba(161, 21, 21, .3)",
        borderColor: "rgba(161, 21, 21, .7)",
        data: chartConversionsArr
      }
    ]
  },
  options: {
    responsive: true
  }
});

//Chart code END
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>

<div>
  <canvas id="line-chart"></canvas>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.