이 글은 기계 번역의 미러 문서이며, 원본 기사로 바로 이동하려면 여기를 클릭해 주세요.

Architect_Programmer_Code 농업 네트워크»건축가 › 프로그래밍 › .Net/C # › Highcharts는 동적 데이터 주식 그래픽 디스플레이 예제를 구현하기 위해 Asp.net 을 결합합니다...
보기: 23205|회답: 6

[ASP.NET] Highcharts는 동적 데이터 주식 그래프 디스플레이 예제를 구현하기 위해 Asp.net 을 결합합니다

[링크 복사]
게시됨 2015. 6. 28. 오전 12: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초마다 한 번씩 발생하고, 그 안의 코드는 ajaxhandler 폴더의 dataupdate.ashx 파일에서 jQuery의 DynamicUpdate.aspx 페이지와 동일한 루트 디렉터리에 있는 최신 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에서 빼고 나머지 날짜를 밀리초로 변환한 후, js의 setTime 메서드를 통해 새로 초기화된 시간에 값을 할당하는 방법입니다. getTime()으로 얻은 결과가 getTime()을 사용하여 js로 직접 새로운 날짜(연, 월, 일, 시간, 분, 초, 밀리초 형태)를 초기화하는 것은 잘못되었다는 것을 발견했습니다. 1970-1-1이 빼진 이유는 getTime() 메서드의 정의가 1970-1-1에서 현재 시간에서 밀리초 수를 얻기 때문입니다). x축이 시간으로 표시되지 않거나 직접 정의해야 할 때, categories 속성으로도 정의할 수 있습니다. tickPixelInterval은 x축의 밀도를 나타내며, 라벨은 x축의 표시 형식을 포맷하는 데 사용됩니다

yAxis는 컨테이너의 y축에 정의된 속성들의 집합을 나타내며, 이는 x축의 속성과 대체로 동일하지만, Highcharts에서는 y축의 고정 값을 카테고리별로 정의할 수 없습니다. Highcharts의 y축은 주어진 좌표점 데이터를 기반으로 자동으로 생성되며, 이는 시리즈 속성의 데이터 하위 속성에 따라 달라집니다. 예를 들어, 데이터에 값을 할당할 때 최대 값은 300, 최소 값은 100입니다. 그러면 y축 표시는 100에서 300 사이이며, yAxis의 최대 또는 최소 속성도 설정할 수 있습니다

series는 컨테이너에 표시되는 모든 곡선의 집합을 나타내며, 여기서는 하나의 곡선만 보여주고, name은 곡선의 이름을, data는 곡선의 좌표점 연속을 나타내며, x는 앞, y는 뒤에 위치하며, js 배열입니다. 이 경우 x축이 시간을 나타내므로 배열 객체의 x 속성을 time로 설정해야 하지만, 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초마다 한 번씩 발생합니다

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. 6. 28. 오전 10:34:21 |
이 게시물은 microxdd가 2015년 6월 28일 10:35에 마지막으로 편집했습니다.

스티칭 스트링은 가장 성능 낭비가 큰 방법이며 StringBuilder와 함께 사용할 수 있습니다. 하지만 객체를 JSON 문자열로 직접 변환할 수 있는 JSON 직렬화 사용을 권장합니다. 또한 디직렬화할 수도 있습니다
바이두 아이콘 라이브러리 추천 http://echarts.baidu.com/doc/example.html
 집주인| 게시됨 2015. 6. 28. 오전 10:54:45 |
Microxdd가 2015-6-28 10:34에 게시됨
스티칭 스트링은 가장 성능 낭비가 큰 방법이며 StringBuilder와 함께 사용할 수 있습니다. 하지만 객체를 ... 로 직접 변환할 수 있는 JSON 직렬화 사용을 권장합니다.

json의 장점은 정말 신성한 말이라는 점인가요? 이건 들어본 적밖에 없어
게시됨 2015. 6. 28. 오후 4:02:07 |
2015-6-28 10:54에 게시됨
json의 장점은 정말 신성한 말이라는 점인가요? 이건 들어본 적밖에 없어

JSON은 언어에 구애받지 않는 데이터 형식입니다
게시됨 2015. 6. 28. 오후 4:03:36 |
Delver_Si 2015-6-28 16:02에 게시됨
JSON은 언어에 구애받지 않는 데이터 형식입니다

JS에 필요한 데이터를 백그라운드에서 JSON 형식으로 직접 전송하는 방법, JS 다루는 방법
 집주인| 게시됨 2015. 6. 28. 오후 5:33:24 |
Delver_Si 2015-6-28 16:03에 게시됨
JS에 필요한 데이터를 백그라운드에서 JSON 형식으로 직접 전송하는 방법, JS 다루는 방법

학습
게시됨 2015. 6. 29. 오후 6:56:59 |
샤오자자 2015-6-28 17:33에 게시됨
학습

면책 조항:
Code Farmer Network에서 발행하는 모든 소프트웨어, 프로그래밍 자료 또는 기사는 학습 및 연구 목적으로만 사용됩니다; 위 내용은 상업적 또는 불법적인 목적으로 사용되지 않으며, 그렇지 않으면 모든 책임이 사용자에게 부담됩니다. 이 사이트의 정보는 인터넷에서 가져온 것이며, 저작권 분쟁은 이 사이트와는 관련이 없습니다. 위 내용은 다운로드 후 24시간 이내에 컴퓨터에서 완전히 삭제해야 합니다. 프로그램이 마음에 드신다면, 진짜 소프트웨어를 지원하고, 등록을 구매하며, 더 나은 진짜 서비스를 받아주세요. 침해가 있을 경우 이메일로 연락해 주시기 바랍니다.
Mail To:help@itsvse.com