使用来自 JSON 对象的数据用多条线填充 Chart.Js 线图

Question

我有一个 JSON 对象，我正在尝试使用 Chart.Js 在折线图上绘制数据。我能够通过单个事件成功地做到这一点，但我无法绘制涵盖多个地理位置的事件。

[{"DT":"2018-10-10","LOCATIONOOS":0,"GRP":"GEORGIA"},{"DT":"2018-10-10","LOCATIONOOS":6,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-11","LOCATIONOOS":13,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-11","LOCATIONOOS":195,"GRP":"GEORGIA"},{"DT":"2018-10-12","LOCATIONOOS":66,"GRP":"GEORGIA"},{"DT":"2018-10-12","LOCATIONOOS":3,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-13","LOCATIONOOS":0,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-13","LOCATIONOOS":20,"GRP":"GEORGIA"},{"DT":"2018-10-14","LOCATIONOOS":10,"GRP":"GEORGIA"},{"DT":"2018-10-14","LOCATIONOOS":0,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-15","LOCATIONOOS":0,"GRP":"ALABAMA/MISSISSIPPI/LOUISIANA"},{"DT":"2018-10-15","LOCATIONOOS":5,"GRP":"GEORGIA"},{"DT":"2018-10-16","LOCATIONOOS":2,"GRP":"GEORGIA"},{"DT":"2018-10-17","LOCATIONOOS":2,"GRP":"GEORGIA"}]

首先：我从 JSON 对象获取唯一日期以用作我的 x 轴标签：

//get the unique dates from the json obj which will be used as labels on the chart
    labels = [];
    var labels = [];
        for(i = 0; i< obj.length; i++){    
        if(labels.indexOf(obj[i].DT) === -1){
            labels.push(obj[i].DT);
        }
        }

接下来我对 GRP（地点）做同样的事情。我相信我需要这些数据，因为那将是我想在图表上显示的行数：

    locations = [];
    for(i = 0; i< obj.length; i++){    
        if(locations.indexOf(obj[i].GRP) === -1){
            locations.push(obj[i].GRP);
        }
    }

最后 - 我不得不以某种方式遍历 JSON obj 并将数据推送到（在本例中）两个不同的数据集以在图表上绘制图表。这是我不清楚的部分...我相信我可能需要一个嵌套循环，其中外循环遍历 JSON obj，内循环遍历位置数组并将数据推送到两个不同的数据集对象中。 ..

    locationoos = [];
    for(i = 0; i< obj.length; i++){
        var data = {
           labels: labels,
            datasets: [{
                label: locations[0],
                borderColor: "red",
                borderWidth: 2,
                hoverBackgroundColor: "red",
                hoverBorderColor: "red",
                data: locationsoos,
                fill: false
            }]
        }
    }

有人有这方面的经验吗？

全功能：

function initGraph() {
    var labels = [];
    var counts = [];
    var grp = [];

    $.ajax({
        type: "GET",
        url: "../test/cfc/test.cfc",
        cache: false,
        async: false,
        data: { method: "getChartData",
            Id: 29,
        },
        success: function(output) {
            json = output;
            obj = JSON.parse(json);
        },
        error: function(httpRequest, textStatus, errorThrown) {
            alert("initGraph status=" + textStatus + ",error=" + errorThrown);
        }
    });


    //get the unique dates from the json obj which will be used as labels on the chart
    var labels = [];
    for(i = 0; i< obj.length; i++){    
        if(labels.indexOf(obj[i].DT) === -1){
            labels.push(obj[i].DT);
        }
    }

    //select the unique market clusters
    var locations = [];
    for(i = 0; i< obj.length; i++){    
        if(locations.indexOf(obj[i].GRP) === -1){
            locations.push(obj[i].GRP);
        }
    }

    locationsoos=[]
    //loop over obj.length
    for(i = 0; i< obj.length; i++){
        //loop over locations array
        for(j = 0; j< locations.length; j++){
            var data = {
                    labels: labels,
                    datasets: [{
                        label: locations[0],
                        //backgroundColor: "",
                        borderColor: "red",
                        borderWidth: 2,
                        hoverBackgroundColor: "red",
                        hoverBorderColor: "red",
                        data: locationsoos,
                        fill: false
                    }]  
            }
        }
    };

    var options = {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        precision: 0
                    }
                }]
            },
            title: {
                display: true,
                text: 'Locations OOS vs Time',
                fontStyle: 'bold',
                fontColor: 'blue',
                position: 'top',
                fontSize: 14
            }
        };

    Chart.Line('mobGraph', {
      data: data,
      options: options
    });
}

Answer 1

您的问题中有几个方面不太清楚您在寻找什么，但您似乎走在正确的轨道上。

我认为您遇到困难的主要原因是您的数据集可能不完整，因此在您设置标签以应对多个数据集时会使情况复杂化。改善此问题的一种方法是抓住存在差距的区域，然后将数据设为零值。

您想要提取位置和唯一时间戳，然后这些唯一时间戳成为您的主标签列表，您可以将不完整的数据与该列表进行比较，并在必要时进行填充。

从那里开始，只需循环遍历数据并设置要传递给图表函数的结构。

你不确定的循环部分可以这样做：

  locations.forEach(function(location) 
    {
    var labels = [];
    var oos = [];
    obj.forEach(function(report) 
      {
      if(report.GRP === location)
        {
        oos.push(report.LOCATIONOOS)
        labels.push(report.DT);
        }
      });

然后有必要将缺失的覆盖值附加到数据中。尽管您可能希望以不同方式对待它们，但我已将它们设置为零。

看看这个工作 fiddle https://jsfiddle.net/jumpypaula/pgqy1k6d/7/

使用来自 JSON 对象的数据用多条线填充 Chart.Js 线图

Populating Chart.Js line graph with multiple lines using data from a JSON Object

javascript

json

for-loop

linechart

chart.js