Блог

Я пытался создать диаграмму на jqPlot, используя сложенные столбцы (имхо, был бы лучший способ графического отображения приведенных выше данных, но это зависит не от меня.) итак, вот фиктивные данные:

 var data = {
                    "Network 1": {
                        "Avg. Speed": 10000,
                        "D/S": 10000,
                        "U/S": 10000
                    },
                    "Network 2": {
                        "Avg. Speed": 15000,
                        "D/S": 15000,
                        "U/S": 15000
                    },
                    "Network 3": {
                        "Avg. Speed": 20000,
                        "D/S": 20000,
                        "U/S": 20000
                    }
                };
  

Сетевыми будут ось X и среднее значение. Скорость / DS и US были бы фактами, поэтому каждая сеть имела бы, в данном случае, 3 сложенных столбца со своими данными.

Я передавал данные jqplot таким образом, просто чтобы проверить результаты, но график пустой:

 plot2 = $.jqplot('divGraphNetwork', [], {
        animate: !$.jqplot.use_excanvas,
        stackSeries: true,
        dataRenderer: data,
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                barPadding: 2,
                barMargin: 0,
                barDirection: 'vertical',
                barWidth: 20
            },
            pointLabels: {
                //location: 'se',
                ypadding: 0
            }
        },
        title: {
            text: 'Network Information',   // title for the plot,
            show: true,
        },
        legend: {
            show: false,
            location: 'e',
            placement: 'outside'
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer
            },
            yaxis: {
                min:0,
                autoscale: true
            }
        }
    });
  

dataRenderer должна быть функцией, а не объектом JSON. Эта функция должна взять объект JSON и преобразовать его в 2D-массив.

2D-массив должен быть в следующем формате:

 [[Network1 AV/Speed, Network2 AV/Speed, Network3 AV/Speed],
[Network1 D/S, Network2 D/S, Network3 D/S],
[Network1 U/S, Network2 U/S, Network3 U/S]]
  

Я создал здесь скрипку для демонстрации. Я добавил dataRenderer() функцию следующим образом:

 function dataRenderer() {
    var result = [];
    var avgSpeed = [];
    var ds = [];
    var us = [];
    // Loop over each network
    for (var network in data) {
        // Add each of the stats for the network into the corresponding array
        avgSpeed.push(data[network]["Avg. Speed"]);
        ds.push(data[network]["D/S"]);
        us.push(data[network]["U/S"]);
    }
    // Add the av speed, DS and US arrays to the result array creating a 2D array
    result.push(avgSpeed);
    result.push(ds);
    result.push(us)
    return resu<
}
  

Затем я изменил параметр dataRenderer, чтобы указывать на функцию вместо данных объекта JSON:

 var plot2 = $.jqplot('divGraphNetwork', [], {
    ...
    dataRenderer: dataRenderer,
    ....
});