Заполнение линейного графика Chart.Js несколькими строками с использованием данных из объекта JSON - PullRequest
Новая
       15

Заполнение линейного графика Chart.Js несколькими строками с использованием данных из объекта JSON

2 голосов
/ 14 апреля 2019

У меня есть объект 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 и передать данные (в данном случае) в два разных набора данных для построения диаграммы на графике. Это та часть, о которой я размышляю ... Мне кажется, что мне, вероятно, нужен вложенный цикл с внешним циклом, проходящим по объекту JSON, и внутренним циклом, проходящим по массиву местоположений и помещающим данные в два разных объекта наборов данных ... 

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

1 Ответ

2 голосов
/ 14 апреля 2019

В вашем вопросе есть несколько областей, в которых не совсем ясно, что вы ищете, но вы, кажется, находитесь на правильном пути.

Я думаю, что основная причина, по которой вы отклеились, состоит в том, что у вас потенциально неполные наборы данных, что усложняет картину, когда вы приходите к настройке ваших меток для работы с несколькими наборами данных.Один из способов решить эту проблему - захватить области, в которых есть пробелы, и просто поместить данные в нулевое значение.

Вы правы, когда хотите извлечь местоположения и уникальные временные метки, а затем эти уникальные временные метки станутВаш список основных меток, с которым вы можете сравнить свои неполные данные и заполнить их, где это необходимо.

Оттуда просто вопрос циклического перебора данных и настройки структур для передачи вашей функции построения диаграмм.

Часть цикла, в которой вы не были уверены, может быть выполнена следующим образом: 

  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/

...