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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (173)

我有一个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
    });
}
提问于
用户回答回答于

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

我认为你未能解决的主要原因是你有可能不完整的数据集,因此当你设置标签来应对多个数据集时,这会使图片变得复杂。改善此问题的一种方法是抓住存在间隙的区域,并将数据置于零值。

您想要提取位置和唯一时间戳是正确的,然后这些独特的时间戳会成为您的主标签列表,您可以根据需要比较不完整的数据并填写。

从那里只需循环数据并设置结构以传递给您的图表功能。

您不确定的循环部分可以像这样完成:

  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/

扫码关注云+社区

领取腾讯云代金券