JQplot动态数据

使用：JQPlot，JavaScript，Asp.net 4.5，C#和MS Visual Studio 2012。

大家好，这是我遇到的一些代码：

script>
$(document).ready(function () {
    var dataArray = [];
    <%foreach(Last12MonthsRegistered reg in dbregistered)
                  {%>
    dataArray.push(['<%=reg.MonthName.Trim()%>',<%= reg.TotalReg%>]);
        <%}%>
    var plot2 = $.jqplot('chart1', [dataArray], {
        // Give the plot a title.
        title: 'Users Registered Last 12 Months',
        axesDefaults: {
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer
        },
        axes: {
            // options for each axis are specified in seperate option objects.
            xaxis: {
                label: "Months"
            },
            yaxis: {
                label: "User Total"
            }
        }
    });
});
</script>

如您所见，我正在尝试使用从SQL数据库获得的数据来呈现jqplot图，此数据绑定到对象列表。我访问这些值并通过上面脚本中的 Foreach 循环来填充一个数组，该数组又用于 JQplot。

我遇到的问题是什么都没有显示，当我逐步完成 JS 脚本时，它向我显示了以下结果：

dataArray.push(['October',0]);
dataArray.push(['November',0]);
dataArray.push(['December',0]);
dataArray.push(['January',1]);
dataArray.push(['February',8]);
dataArray.push(['March',4]);
dataArray.push(['April',1]);
dataArray.push(['May',0]);
dataArray.push(['June',0]);
dataArray.push(['July',1]);
dataArray.push(['August',1]);
dataArray.push(['September',1]);

哪个看起来正确？ 但是在调试时将鼠标悬停在数组上会显示：

0: Array[2]
1: Array[2]
2: Array[2]
3: Array[2]
4: Array[2]
5: Array[2]
6: Array[2]
7: Array[2]
8: Array[2]
9: Array[2]
10: Array[2]
11: Array[2]
length: 12
__proto__: Array[0]

这看起来根本不对！正如您可能猜到的那样，当我继续时，我得到了一个空白图表。

是的，我对 JavaScript 相当陌生，这是我第一次使用 JQPlot，我正在努力在文档中找到我需要的信息，所以我希望你们能告诉我为什么我的数组似乎是错误的。

干杯男生/女生

更新： 24

/10/2013 - 11：24 AM找到更多信息并将我的代码更改为条形图。

    $(document).ready(function () {
    var dataArray = [];
    var ticks = [];
    <%foreach(Last12MonthsRegistered reg in dbregistered)
                  {%>
    dataArray.push(<%= reg.TotalReg%>);
    <%}%>
    <%foreach(Last12MonthsRegistered reg in dbregistered)
                  {%>
    ticks.push('<%= reg.MonthName.Trim()%>');
    <%}%>
    var plot1 = $.jqplot('chart1', [dataArray], {
        // Give the plot a title.
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: { fillToZero: true }
        },
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        series: [
            { label: 'Users Registered' },
        ],
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
        axes: {
            // options for each axis are specified in seperate option objects.
            xaxis: {
                renderer: $.jqplot.CategoryAxsisRenderer,
                ticks: ticks
            },
            yaxis: {
                pad: 1.05
            }
        }
    });
});

似乎数组很好，而且我在 x axsis 上获得了月份名称，这很棒.....唯一的问题是在最左边相互堆叠，所以什么都没有显示，名字互相覆盖......

我很困惑，有什么想法吗？

    <%foreach(Last12MonthsRegistered reg in dbregistered)
    {%>
       dataArray.push(['<%=reg.MonthName.Trim()%>',<%= reg.TotalReg%>]);
    <%}%>
    <%foreach(Last12MonthsRegistered reg in dbregistered)
    {%>
       ticks.push('<%= reg.MonthName.Trim()%>');
    <%}%>
        var plot1 = $.jqplot('chart1', [dataArray], {
                // Give the plot a title.
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer,
                    rendererOptions: { fillToZero: true }
                },
                // Custom labels for the series are specified with the "label"
                // option on the series option.  Here a series option object
                // is specified for each series.
                series: [
                    { label: 'Users Registered' },
                ],
                // Show the legend and put it outside the grid, but inside the
                // plot container, shrinking the grid to accomodate the legend.
                // A value of "outside" would not shrink the grid and allow
                // the legend to overflow the container.
                legend: {
                    show: true,
                    placement: 'outsideGrid'
                },
                axes: {
                    // options for each axis are specified in seperate option objects.
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer
                        ,ticks: ticks
                    },
                    yaxis: {
                        pad: 1.05,
                        min: 0
                    }
                }
    });