0

使用：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，我正在努力在文档中找到我需要的信息，所以我希望你们能告诉我为什么我的数组似乎是错误的。

欢呼男孩/女孩

更新：2013 年 10 月 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 轴上得到了月份的名称，这很棒.....唯一的问题是在最左边彼此堆叠，所以没有显示任何内容并且名称相互重叠。 ……

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

4

1 回答 1

0

$.jqplot.CategoryAxisRenderer我更正拼写 后，您的代码就开始工作了。Jsfiddle 链接

    <%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
                    }
                }
    });
于 2013-10-24T20:51:43.513 回答