jqPlot条形图，多个显示空数据系列

I´m building a dynamic 6 series bar graph with jqPlot. In my implementation, the user will choose which data will go into each serie and the system will load data according to his choice. The function `GetDataFromSeries() loads the series data given a serie number and the available ticks (as categories - it gets all ticks from all series and builds an unique category array).

我正在使用jqPlot构建动态6系列条形图。在我的实现中,用户将选择将进入每个系列的数据,系统将根据他的选择加载数据。函数`GetDataFromSeries()加载系列数据给定一个系列号和可用的滴答(作为类别 - 它从所有系列得到所有滴答并构建一个唯一的类别数组)。

If the user choose to load all series, everything runs fine. The problem is if the user decide not to load one series (that´s possible). In that case, I will not load that data in GetDataFromSeries() and jqPlot gives me error.

如果用户选择加载所有系列,一切运行正常。问题是如果用户决定不加载一个系列(可能)。在这种情况下,我不会在GetDataFromSeries()中加载该数据,jqPlot会给我错误。

I´m trying several ways to do it, but I´m being successfull. In the code the way it is, I´m getting Uncaught Error: No data specified if the user decides not to load one of the series. I have tried to put dummy data (null or zero) in case one of the series are empty, but doing so the bars are moved and shrinked as If I have more bars to be shown.

我正在尝试几种方法,但我是成功的。在代码的方式,我得到Uncaught错误:如果用户决定不加载其中一个系列,则不指定数据。我试图放置虚拟数据(null或零),以防其中一个系列为空,但这样做会移动和缩小条形,如果我有更多的条形显示。

Don´t know how to solve that. Appreciate very much any kind of help.

不知道如何解决这个问题。非常感谢任何帮助。

Rds.

[CODE]

function GeneratePlot() {

    var tickAxis = new Array();
    var data0 = new Array();
    var data1 = new Array();
    var data2 = new Array();
    var data3 = new Array();
    var data4 = new Array();
    var data5 = new Array();

    ///
    /// Convert series into meaningfull data
    ///
    tickAxis = GetTickAxisFromSeries();
    data0 = GetDataFromSeries(0, tickAxis);
    data1 = GetDataFromSeries(1, tickAxis);
    data2 = GetDataFromSeries(2, tickAxis);
    data3 = GetDataFromSeries(3, tickAxis);
    data4 = GetDataFromSeries(4, tickAxis);
    data5 = GetDataFromSeries(5, tickAxis);

    var options = {
        title: 'Evolution Plot',
        height: 500,
        series: [
            { show: (data0.length != 0) },
            { show: (data1.length != 0) },
            { show: (data2.length != 0) },
            { show: (data3.length != 0) },
            { show: (data4.length != 0) },
            { show: (data5.length != 0) }
        ],
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: tickAxis,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    angle: -90,
                    fontSize: '8pt',
                    formatter: $.jqplot.DateTickFormatter
                }
            },
            yaxis: {
                pad: 1.05,
                tickOptions: {
                    formatString: '%d',
                    fontSize: '8pt'
                }
            }
        },
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                fillToZero: true
            }
        },
        highlighter: {
            show: true,
            sizeAdjust: 7.5
        },
        cirsor: {
            show: false
        }
    }

    var plot = $.jqplot('chart', [data0, data1, data2, data3, data4, data5], options).replot();
}

1 个解决方案

#1

I think this would solve your problem:

我想这可以解决你的问题:

function GeneratePlot() {

        var tickAxis = new Array();
        var data = new Array();
        var tempData = [];
        ///
        /// Convert series into meaningfull data
        ///
        tickAxis = GetTickAxisFromSeries();
        for(var i = 0; i < 6; i++){
            tempData = GetDataFromSeries(i, tickAxis);
            if(tempData.length > 0){
                data.push(tempData);
            }
        }

        var options = {
            title: 'Evolution Plot',
            height: 500,
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: tickAxis,
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                    tickOptions: {
                        angle: -90,
                        fontSize: '8pt',
                        formatter: $.jqplot.DateTickFormatter
                    }
                },
                yaxis: {
                    pad: 1.05,
                    tickOptions: {
                        formatString: '%d',
                        fontSize: '8pt'
                    }
                }
            },
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                rendererOptions: {
                    fillToZero: true
                }
            },
            highlighter: {
                show: true,
                sizeAdjust: 7.5
            },
            cirsor: {
                show: false
            }
        }

        var plot = $.jqplot('chart', data, options).replot();
    }