JQplot动态数据

Question

使用: JQPlot，JavaScript，Asp.net 4.5，C#和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上午11:24 找到了更多信息，并将我的代码更改为条形图。

    $(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轴上的月份名称--这是great.....Only问题--在非常左边互相堆叠在一起，所以什么都不显示，名字也在对方上面……

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

Answer 1

一旦我纠正了$.jqplot.CategoryAxisRenderer拼写，您的代码就开始工作了。琴杆

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