0

ASP.NET WebForms アプリケーションでいくつかのグラフを作成し、アプリケーションでグラフを作成します。グラフのデータについては、次のようにデータ テーブルの文字列を (javascript で) 記述する必要があります。

var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Sold Pens');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows([
  [new Date(2008, 1 ,1), 30000, null, null, 40645, null, null],
  [new Date(2008, 1 ,2), 14045, null, null, 20374, null, null],
  [new Date(2008, 1 ,3), 55022, null, null, 50766, null, null],
  [new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
  [new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null],
  [new Date(2008, 1 ,6), 33322, null, null, 39463, null, null]
]);

私はこれを行うために SqlDataReaders を使用しており、この汚いコードを作成しています:

string jsGraph = "";
jsGraph += "data.addRows([";
            while (dsChartsData.Read())
            {
                var d = (DateTime)dsChartsData["dateColumn"];
                jsGraph += "[new Date(" + d.Year.ToString() + ", " + d.Month.ToString() + ", " + d.Day.ToString() + "), " + dsChartsData["value1"].ToString() + ", null, null, " + dsChartsData["value3"].ToString() + ", null, null],";
            }
jsGraph += "]);"

これをより保守しやすく、クリーンなコードでデバッグしやすい方法はありますか? (.cs ファイルの JavaScript は、私のコードでは大きな混乱であり、何百万もの連結などがあります)

Obs: 現在、私は webForms を使用していますが、MVC でこれを行う大きな利点がある場合は、教えてください。チャートをレンダリングするためだけに MVC でページを作成できるかもしれません (もちろん、それを学習した後)。

4

1 に答える 1

1

まず第一に、JavaScript配列から区切りコンマがありません...,

第二に、なぜそんなに多くの連結があるのでしょうか? public 変数を使用して、javascript から呼び出してみませんか?

お気に入り：

public string graphData = "";

あなたの方法では：

StringBuilder jsGraph = new StringBuilder();
jsGraph.AppendLine("[");

while (dsChartsData.Read())
{
    var d = (DateTime)dsChartsData["dateColumn"];
    jsGraph.AppendLine("[new Date(" + d.Year.ToString() + ", " + d.Month.ToString() + ", " + d.Day.ToString() + "), " + dsChartsData["value1"].ToString() + ", null, null, " + dsChartsData["value3"].ToString() + ", null, null],");
}
jsGraph.AppendLine("]");

graphData = jsGraph.ToString();

そしてあなたのJavascriptで：

var graphData = <%= graphData %>;
...    
data.addRows(graphData);

ところで、あなたの大きな連結は次のように書かれるべきです：

jsGraph.AppendFormat(
            "[new Date({0:yyyy, M, d}), {1}, null, null, {2}, null, null],", 
              (DateTime)dsChartsData["dateColumn"], 
              dsChartsData["value1"],
              dsChartsData["value3"]);

witch の方がはるかに読みやすくなります。

于 2012-04-25T18:14:37.067 に答える