Question

使用：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 axsis上得到了月份名称，这很好.....只有问题是在左边相互堆叠，所以什么都没有显示，名字结束了彼此......

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

Answer 1

我的代码在我更正$.jqplot.CategoryAxisRenderer拼写后立即开始工作。 Jsfiddle Link

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

JQplot动态数据

1 个答案: