Este artículo es un artículo espejo de traducción automática, por favor haga clic aquí para saltar al artículo original.

Architect_Programmer_Code Red Agrícola»Arquitecto › Programación › .Net/C # › Highcharts combina Asp.net para realizar datos dinámicos de ejemplos gráficos de stock ...
Vista: 23205|Respuesta: 6

[ASP.NET] Highcharts combina Asp.net para realizar ejemplos dinámicos de gráficos de stock

[Copiar enlace]
Publicado en 28/6/2015 0:06:24 | | | |

El mercado específico de aplicaciones para este ejemplo es que necesito leer el precio de una materia prima de la base de datos regularmente y luego mostrarlo en la página web como un gráfico, similar al gráfico de tendencia de precios de los instrumentos de negociación en acciones.

Yo uso asp.net, combinado con la implementación del plugin Highcharts en jQuery, el plugin puede soportar muchos tipos de gráficos, pero son estáticos, y los ejemplos que se proporcionan necesitan ser transformados, los amigos interesados pueden ir a la web oficial de Highcharts para ver (http://www.highcharts.com/), que ofrece muchas demos, para ser honesto, para entender mis necesidades, debería usar Highstock, Sin embargo, tras ver el ejemplo de actualización dinámica de Highcharts, también puedo darme cuenta de que mi interfaz de requisitos es más concisa, así que este artículo utiliza el modelo de actualización dinámica en Highcharts, y el tipo gráfico es spline. El mapa de efectos finales es el siguiente (el precio de Pinqijin se actualiza cada 10 segundos y se añade un punto al gráfico de líneas cada 10 segundos):

Logra la recogida de escalones:

Crea un sitio web nuevo con VS y crea una asp.net página DynamicUpdate.aspx, el código de página es el siguiente:


  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>
Copiar código

Highcharts propiedad renderTo indica contenedores de visualización,

events representa el evento que el contenedor necesita registrarse, donde load significa que ocurre después de que la carga se ha completado; aquí se establece un temporizador js en la carga, que ocurre cada 10 segundos, y el código en él es para solicitar el último GOLD desde el archivo dataupdate.ashx de la carpeta ajaxhandler en el mismo directorio raíz que la página DynamicUpdate.aspx a través de ajax en jQuery Los datos de precios de esta variedad, aquí está la razón por la que añado randomCode + "=" + oldrandomCode en la URL de ajax, porque añadir un número aleatorio puede evitar la caché, y flag=1 es porque mi archivo dataupdate.ashx quiere aceptar múltiples solicitudes de diferentes ajax, así que usa flag para distinguirlo

xAxis representa la colección de atributos definidos para el eje x del contenedor, type representa el tipo de texto mostrado, opcional, aquí relleno el tipo de hora, aquí ten en cuenta que el valor predeterminado para la instancia es la hora GMT, también puedes usar la hora UTC, pero generalmente usamos la hora de Pekín (GMT o UTC) + 8 horas = hora de Pekín, así que cuando usamos ajax para obtener la hora de Pekín, deberíamos restar 8 horas de la hora (aquí también quiero compartir una experiencia, Cómo convertir el tiempo del servidor en tiempo js que puede ser usado por el método .getTime(), es decir, restar el tiempo del servidor de 1970-1-1, convertir los días restantes a milisegundos y luego asignar un valor al tiempo recién inicializado mediante el método setTime en js, encontré que el resultado obtenido por getTime() es incorrecto para inicializar un tiempo js directamente en js en forma de nueva fecha (año, mes, día, hora, minuto, segundo, milisegundo) con getTime(), En cuanto a por qué se resta 1970-1-1, es porque la definición del método getTime() es obtener el número de milisegundos del tiempo actual de 1970-1-1), cuando el eje x no se muestra como un tiempo o necesitas definirlo tú mismo, también puede definirse mediante el atributo categories, tickPixelInterval representa la densidad del eje x, y etiquetas se usa para formatear el formato de visualización del eje x

yAxis representa un conjunto de atributos definidos para el eje y del contenedor, que es aproximadamente igual que los atributos del eje x, pero en Highcharts no es posible definir el valor fijo del eje y a través de categorías; el eje y de Highcharts se genera automáticamente en función de los datos de puntos de coordenadas dados, que dependen del subatributo de datos del atributo serie, por ejemplo, cuando asignas un valor a los datos. El valor máximo es 300 y el valor mínimo es 100. Entonces la visualización del eje y estará entre 100 y 300, o también puedes establecer el atributo máximo o mínimo del eje y.

series representa la colección de todas las curvas mostradas en el contenedor, aquí solo muestro una curva, nombre representa el nombre de la curva, data representa la colección de una serie de puntos de coordenadas de la curva, x está delante, y detrás, es un array js, en este caso, porque el eje x muestra el tiempo, así que la propiedad x del objeto array debe establecerse en tiempo, pero en Highcharts no se asigna tiempo directamente al eje x, En su lugar, el número de milisegundos entre 1970-1-1 y cierto tiempo se asigna al eje x para representar este tiempo, así que debe usarse el método getTime(), la forma del punto de coordenadas del eje y debe ser y = número pequeño * forma entera, y no entendí por qué Highcharts tenía que hacer esto, porque los datos de precios de la variedad en este ejemplo son generalmente iguales, así que tuve que dividir por 200 al obtener los datos, y luego multiplicar por 200 al asignar un valor al eje y.


<%= jsonstr %> en el código de la página son los datos iniciales que necesito obtener del servidor para inicializar el grafo, la generación de CS de la página


  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.         }
Copiar código

Entre ellas, la tabla TabMerPrice es la tabla de información de precios variados, TMPTime time, TMPPrice price, TMPTime intervalo de tiempo es de diez segundos, yo uso un trabajo de base de datos para generar el registro de la tabla, que ocurre una vez cada diez segundos

AddHours(-8) sirve para convertir la hora a la hora de Pekín, y el formato de datos generado es el formato json

El código dataupdate.ashx se ve así:


  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.         }
Copiar código

Esta es la implementación aproximada de la agregación por pasos, que permite mostrar en tiempo real los datos del lado del servidor con un gráfico similar al formato stock


HighCharts演示.zip (48.69 KB, Número de descargas: 1)


Puntuación

Número de participantes1MB+1 contribuir+1 Colapso razón
Dios masculino, felicidades + 1 + 1 ¿Puede el casero darme una información de contacto? Ayuda mucho

Ver todas las valoraciones





Anterior:Cómo entrar en modo desarrollador para Android 4.4.x
Próximo:Basado en Sina@ función ejemplo sencillo

Publicaciones relacionadas
Publicado en 28/6/2015 10:34:21 |
Esta publicación fue editada por última vez por microxdd el 28-6-2015 a las 22:35

Coser cuerdas es el rendimiento más desperdiciador y puede usarse con StringBuilder. Sin embargo, se recomienda usar la serialización JSON, que puede convertir objetos directamente en cadenas JSON. También puede deserializarse
Recomiendo la biblioteca de iconos de Baidu http://echarts.baidu.com/doc/example.html
 Propietario| Publicado en 28/6/2015 10:54:45 |
microxdd publicado el 28-6-2015 a las 10:34
Coser cuerdas es el rendimiento más desperdiciador y puede usarse con StringBuilder. Sin embargo, se recomienda usar serialización JSON, que puede convertir directamente objetos en ...

¿La ventaja del json es que es un caballo divino? Solo he oído hablar de esto
Publicado en 28/6/2015 16:02:07 |
Publicado el 28-6-2015 a las 10:54
¿La ventaja del json es que es un caballo divino? Solo he oído hablar de esto

JSON es un formato de datos que es independiente del lenguaje
Publicado en 28/6/2015 16:03:36 |
Delver_Si Publicado el 28-6-2015 a las 16:02
JSON es un formato de datos que es independiente del lenguaje

Transferir directamente los datos requeridos por JS desde el fondo en formato JSON, cómo tratar con JS
 Propietario| Publicado en 28/6/2015 17:33:24 |
Delver_Si Publicado el 28-6-2015 a las 16:03
Transferir directamente los datos requeridos por JS desde el fondo en formato JSON, cómo tratar con JS

Aprendizaje
Publicado en 29/6/2015 18:56:59 |
Xiao Zhazha Publicado el 28-6-2015 17:33
Aprendizaje

Renuncia:
Todo el software, materiales de programación o artículos publicados por Code Farmer Network son únicamente para fines de aprendizaje e investigación; El contenido anterior no se utilizará con fines comerciales o ilegales; de lo contrario, los usuarios asumirán todas las consecuencias. La información de este sitio proviene de Internet, y las disputas de derechos de autor no tienen nada que ver con este sitio. Debes eliminar completamente el contenido anterior de tu ordenador en un plazo de 24 horas desde la descarga. Si te gusta el programa, por favor apoya el software genuino, compra el registro y obtén mejores servicios genuinos. Si hay alguna infracción, por favor contáctanos por correo electrónico.
Mail To:help@itsvse.com