jqPlot上的堆栈栏与动态json

Stackedbars on jqPlot with a dynamic json

本文关键字：动态 json 堆栈 jqPlot      更新时间：2023-09-26

我一直在尝试使用堆叠条形图在jqPlot上完成一个图表(imho，会有更好的方式以图形方式显示上面的数据，但这不是我说了算。)下面是虚拟数据:

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]]

我在这里创建了一个Fiddle来演示。我已经添加了一个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 result;
}

然后我修改了dataRenderer选项，使其指向函数而不是JSON对象数据:

var plot2 = $.jqplot('divGraphNetwork', [], {
    ...
    dataRenderer: dataRenderer,
    ....
});
相关文章：