この記事は機械翻訳のミラー記事です。元の記事にジャンプするにはこちらをクリックしてください。

Architect_Programmer_Code農業ネットワーク»建築家 › プログラミング › .Net/C# › Highchartsは Asp.net を組み合わせて動的データストックのグラフィカル表示例を実現しています...
眺める： 23205|答える： 6

[ASP.NET] Highchartsは Asp.net を組み合わせて動的データ、株式グラフ表示の例を実現しています

[リンクをコピー]
掲載地 2015/06/28 0:06:24 | | | |

この例の具体的な応用市場は、データベースから商品の価格を定期的に読み取り、それをウェブページにグラフとして表示するというものです。これは株式取引の取引商品の価格トレンドチャートに似ています。

私は asp.net を使っていて、jQueryのHighchartsプラグインと組み合わせて使っています。プラグインは多くの種類のグラフィックをサポートしていますが、それらは静的で、提供された例は変換が必要です。興味のある友人はHighchartsの公式サイト(http://www.highcharts.com/)で見ることができます。そこには多くのデモがあります。正直なところ、私のニーズを理解するためにはHighstockを使うべきです。 しかし、Highchartsの動的更新の例を見て、私の要求インターフェースはより簡潔であることに気づきました。そこでこの記事はHighchartsの動的更新モデルを使用し、グラフィックタイプはスプラインです。最終的な効果マップは以下の通りです(Pinqijinの価格は10秒ごとに更新され、折れ線グラフに10秒ごとに点が加算されます):

ステップ収集の達成:

VSで新しいウェブサイトを作成し、asp.net ページを作成してください。DynamicUpdate.aspxページコードは以下の通りです:


  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicUpdate.aspx.cs"
  2.     Inherits="WebImg.DynamicUpdate" %>

  4. <!DOCTYPE HTML>
  5. <html>
  6. <head>
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  8.     <title>动态显示价格图例</title>
  9.     <scrip去掉t type="text/javascrip去掉t" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></scrip去掉t>
  10.     <scrip去掉t type="text/javascrip去掉t">
  11.    $(function () {
  12.        $(document).ready(function () {
  13.            Highcharts.setOptions({
  14.                global: {
  15.                    useUTC: false
  16.                }
  17.            });
  18.            var chart;
  19.            chart = new Highcharts.Chart({
  20.                chart: {
  21.                    renderTo: 'container',
  22.                    type: 'spline',
  23.                    marginRight: 10,
  24.                    events: {
  25.                    load: function () {
  26.                    // set up the updating of the chart each second
  27.                    var series = this.series[0];
  28.                    setInterval(function () {
  29.                                   var randomCode = parseInt(Math.random() * 10000);
  30.                                   var oldrandomCode = parseInt(Math.random() * 10000);
  31.                                   $.ajax({
  32.                                     url: "ajaxhandler/dataupdate.ashx?" + randomCode + "=" + oldrandomCode + "&flag=1",
  33.                                     type: "get",
  34.                                     dataType: "json",
  35.                                     success: function (data, textStatus, XMLHttpRequest) {
  36.                                         var ctime = new Date();
  37.                                         ctime.setTime(parseInt(data.rows[0].times));
  38.                                         var x = ctime.getTime(), // current time
  39.                                         y = data.rows[0].price * 200;
  40.                                         series.addPoint([x, y], true, true);
  41.                                     },
  42.                                     error: function () { }
  43.                                    });
  44.                    }, 10000);
  45.                    }
  46.                }
  47.            },
  48.            title: {
  49.                text: '品旗撮合交易市场品种行情'
  50.            },
  51.            xAxis: {
  52.                         title: {
  53.                                 text: '时间'
  54.                             },
  55.                type: 'datetime',
  56.                tickPixelInterval: 150,
  57.                         labels:{formatter:function(){
  58.                             var vDate = new Date(this.value);
  59.                             return vDate.getHours()+":"+vDate.getMinutes()+":"+vDate.getSeconds();
  60.                         }}
  61.            },
  62.            yAxis: {
  63.                title: {
  64.                    text: '价格'
  65.                },
  66.                plotLines: [{
  67.                    value: 0,
  68.                    width: 1,
  69.                    color: '#808080'
  70.                }]
  71.            },
  72.            tooltip: {
  73.                formatter: function () {
  74.                    return '<b>' + this.series.name + '</b><br/>' +
  75.                         Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
  76.                         Highcharts.numberFormat(this.y, 2);
  77.                }
  78.            },
  79.            legend: {
  80.                enabled: false
  81.            },
  82.            exporting: {
  83.                enabled: false
  84.            },
  85.                     credits:{
  86.                         text:'品旗金属交易市场',
  87.                         url:'http://www.inv6.com'
  88.                     },
  89.            series: [{
  90.                name: '品旗金(GOLD)',
  91.                data: (function () {
  92.                    var data = [],
  93.                             i;
  94.                             var jsonData = <%= jsonstr %>;
  95.                    for (i = -19; i <= 0; i++) {
  96.                                 var ctime = new Date();
  97.                                 ctime.setTime(parseInt(jsonData.rows[i+19].time1));
  98.                        data.push({
  99.                             x: ctime.getTime(),
  100.                                      y: jsonData.rows[i + 19].price * 200
  101.                        });
  102.                    }
  103.                    return data;
  104.                })()
  105.            }]
  106.        });
  107.    });
  108. });
  109.     </scrip去掉t>
  110. </head>
  111. <body>
  112.     <scrip去掉t src="http://code.highcharts.com/highcharts.js"></scrip去掉t>
  113.     <scrip去掉t src="http://code.highcharts.com/modules/exporting.js"></scrip去掉t>
  114.     <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
  115.     </div>
  116. </body>
  117. </html>
コードをコピーします

HighchartsプロパティのrenderToはdisplay containerを示します。

eventsはコンテナが登録する必要があるイベントを表し、loadはロード完了後に発生します。ここではJSタイマーがロード中に設定され、10秒ごとに1回発生します。コードはajaxhandlerフォルダのdataupdate.ashxファイルから、jQueryのDynamicUpdate.aspxページと同じルートディレクトリにあるデータupdate.ashxファイルから最新のGOLDを要求するものです価格データについては、ajax URLにrandomCode + "=" + oldrandomCodeを追加する理由です。ランダムな数字を追加することでキャッシュを回避できるからです。flag=1はdataupdate.ashxファイルが異なるajaxからの複数のリクエストを受け付けるため、flagで区別しています

xAxisはコンテナのx軸に定義された属性の集合を表し、typeは表示されるテキストタイプを表します。オプションです。ここでは時間タイプを入力します。ここではインスタンスのデフォルトがGMT時間であることに注意してください。UTC時間も使えますが、一般的には北京時間(GMTまたはUTC)+8時間=北京時間を使っています。ですので、Ajaxで北京時間を得る場合は、時間から8時間を差し引くべきです(ここで経験を共有したいと思います。 .getTime() メソッドで使えるサーバー時間をjs時間に変換する方法、つまりサーバー時間から1970-1-1から引き、残りの日をミリ秒に変換し、その後 setTime メソッド(js)で新たに初期化された時間に値を割り当てる方法です。getTime() で得られた結果は、getTime() で js 時間を新しい日付(年、月、日、時、分、秒、ミリ秒)の形で直接初期化するには誤りがあることがわかりました。 1970-1-1が引く理由は、getTime()メソッドの定義が1970-1-1の現在の時刻からミリ秒数を取得するためです。x軸が時間として表示されていないか、自分で定義する必要がある場合、category属性で定義することもできます。tickPixelIntervalはx軸の密度を表し、ラベルはx軸の表示フォーマットに使われます

yAxisはコンテナのy軸に定義された属性の集合を表し、x軸の属性とほぼ同じですが、Highchartsではy軸の固定値をカテゴリで定義することはできません。Highchartsのy軸は、シリーズ属性のデータサブ属性に依存し、例えばデータに値を割り当てる際に、与えられた座標点データに基づいて自動的に生成されます。 するとy軸の表示は100から300の間で、y軸の最大または最小属性を設定することもできます

seriesはコンテナ内に表示されるすべての曲線の集合を表します。ここでは1つの曲線のみを示し、nameは曲線の名前を表し、dataは曲線の座標点の連続集合を表します。xは前、yは後ろ。js配列です。この場合、x軸は時間を示しているため、配列オブジェクトのxプロパティは時間に設定する必要がありますが、Highchartsではx軸に直接時間が割り当てられていません。 代わりに、1970-1-1からある時間までのミリ秒数がx軸に割り当てられ、この時間を表すためにgetTime()メソッドを使う必要があり、y軸座標点の形はy = 小数×整数形でなければなりません。なぜHighchartsがこれをしなければならないのか理解できませんでした。なぜなら、この例の多様体の価格データはほぼ同じで、データを取得するときに200で割り、y軸に値を割り当てる際に200を掛ける必要がありました。


ページコードの<%= jsonstr %>は、グラフを初期化するためにサーバーから取得する最初のデータであり、ページのCS生成です


  1. public string jsonstr = "";
  2.         protected void Page_Load(object sender, EventArgs e)
  3.         {
  4.             getData();
  5.         }
  6.         private void getData()
  7.         {
  8.             DataTable dtPrice = SQLDBHelper.ExecuteTable("select top 20 TMPCode,TMPTime,TMPPrice from TabMerPrice with(nolock) order by TMPTime desc");
  9.             string json = "{"rows":[";
  10.             for (int i = (dtPrice.Rows.Count-1); i >= 0; i--)
  11.             {
  12.                 json += "{"time1":"" + (Convert.ToDateTime(dtPrice.Rows[i]["TMPTime"]).AddHours(-8) - new DateTime(1970, 1, 1)).TotalMilliseconds + "","price":"" + (Convert.ToDecimal(dtPrice.Rows[i]["TMPPrice"])/200) + ""},";
  13.             }
  14.             json = json.TrimEnd(',');
  15.             json += "]}";
  16.             jsonstr = json;
  17.         }
コードをコピーします

その中には、TabMerPriceテーブルがバラエティ価格情報表、TMPTime時間、TMPPrice価格、TMPTimeの時間間隔は10秒です。データベースジョブを使ってテーブルの記録を生成し、これは10秒ごとに1回行われます

AddHours(-8)は時間を北京時に変換するためで、生成されるデータ形式はjson形式です

dataupdate.ashxのコードは次のようになります:


  1. public void ProcessRequest(HttpContext context)
  2.         {
  3.             string flag = context.Request.QueryString["flag"].ToString();
  4.             switch (flag)
  5.             {
  6.                 case "1"://获取品种当前价格
  7.                     GetMerPrice(context);
  8.                     break;
  9.             }
  10.         }
  11.         private void GetMerPrice(HttpContext context)
  12.         {
  13.             context.Response.Clear();
  14.             context.Response.Buffer = true;
  15.             context.Response.ContentType = "application/json";
  16.             context.Response.ContentEncoding.GetBytes("utf-8");
  17.             DataTable dtPrice = SQLDBHelper.ExecuteTable("select top 1 TMPCode,TMPTime,TMPPrice from TabMerPrice with(nolock) order by TMPTime desc");
  18.             string json = "{"rows":[";
  19.             json += "{"times":"" + (Convert.ToDateTime(dtPrice.Rows[0]["TMPTime"]).AddHours(-8) - new DateTime(1970, 1, 1)).TotalMilliseconds + "","price":"" + (Convert.ToDecimal(dtPrice.Rows[0]["TMPPrice"]) / 200) + ""}";
  20.             json = json.TrimEnd(',');
  21.             json += "]}";
  22.             context.Response.Write(json);
  23.             context.Response.Flush();
  24.             context.Response.End();
  25.         }
コードをコピーします

これはステップアグリゲーションの大まかな実装であり、サーバー側データのリアルタイム表示を標準フォーマットに似たグラフで実現できます


HighCharts演示.zip (48.69 KB, ダウンロード数: 1)


スコア

参加者数1MB+1 貢献する+1 倒れる 理由
男神よ、おめでとうございます + 1 + 1 大家さんから連絡先を教えてもらえますか?とても助かります

すべての評価を見る





先の：Android 4.4.xの開発者モードに入る方法
次に：関数Sina@単純な例に基づく

関連記事
掲載地 2015/06/28 10:34:21 |
この投稿はmicroxddによって2015年6月28日10:35に最後に編集されました。

弦を縫うのは最も性能の無駄遣いであり、StringBuilderで使えます。 しかし、オブジェクトを直接JSON文字列に変換できるJSONシリアライゼーションの使用が推奨されます。 また、デシリアライズも可能です
Baiduのアイコンライブラリーをおすすめ http://echarts.baidu.com/doc/example.html
 地主| 掲載地 2015/06/28 10:54:45 |
microxDD 2015年6月28日 10:34 投稿
弦を縫うのは最も性能の無駄遣いであり、StringBuilderで使えます。 しかし、オブジェクトを直接変換できるJSONシリアライズの使用が推奨されています...

jsonの利点は、それが神の馬であることですか? このものは聞いたことしかありません
掲載地 2015/06/28 16:02:07 |
2015年6月28日 10:54公開
jsonの利点は、それが神の馬であることですか? このものは聞いたことしかありません

JSONは言語に依存しないデータ形式です
掲載地 2015/06/28 16:03:36 |
Delver_Si 2015年6月28日 16:02に投稿
JSONは言語に依存しないデータ形式です

バックグラウンドからJSに必要なデータを直接JSON形式で転送する方法、JSの扱い方
 地主| 掲載地 2015/06/28 17:33:24 |
Delver_Si 2015年6月28日 16:03に投稿
バックグラウンドからJSに必要なデータを直接JSON形式で転送する方法、JSの扱い方

学習
掲載地 2015/06/29 18:56:59 |
シャオ・ザザ 2015年6月28日 17:33 投稿
学習

免責事項：
Code Farmer Networkが発行するすべてのソフトウェア、プログラミング資料、記事は学習および研究目的のみを目的としています。 上記の内容は商業的または違法な目的で使用されてはならず、そうでなければ利用者はすべての結果を負うことになります。 このサイトの情報はインターネットからのものであり、著作権紛争はこのサイトとは関係ありません。 ダウンロード後24時間以内に上記の内容を完全にパソコンから削除してください。 もしこのプログラムを気に入ったら、正規のソフトウェアを支持し、登録を購入し、より良い本物のサービスを受けてください。 もし侵害があれば、メールでご連絡ください。
Mail To:help@itsvse.com