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

时间:2013-12-28 22:46:16

标签: javascript asp.net-mvc jqplot

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

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

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

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

的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 个答案:

答案 0 :(得分:0)

我认为这可以解决您的问题:

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