JQplot動態數據

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，我努力在那裏找到我需要的信息，所以我希望你們能告訴我爲什麼我的數組看起來像是錯的。

乾杯傢伙/女孩

更新：24/10/2013 - 上午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 
        } 
       } 
    });