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，内部循环遍历locations数组并将数据推入两个不同的数据集对象...

    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);
        }
      });

然后有必要将丢失的覆盖值附加到数据中。尽管您可能希望将它们区别对待，但我将它们设置为零。

查看这个有用的小提琴https://jsfiddle.net/jumpypaula/pgqy1k6d/7/

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

1 个答案: