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