[ASP.NET] Highcharts combine Asp.net pour réaliser des exemples dynamiques de graphiques de stock

Le marché spécifique de l’application pour cet exemple est que je dois lire régulièrement le prix d’une matière première dans la base de données, puis l’afficher sur la page web sous forme de graphique, similaire au graphique de tendance des prix des instruments de négociation en actions.

J’utilise asp.net, combiné à l’implémentation du plugin Highcharts dans jQuery, le plugin peut supporter de nombreux types de graphiques, mais ils sont statiques, et les exemples fournis doivent être transformés, les amis intéressés peuvent aller sur le site officiel de Highcharts pour voir (http://www.highcharts.com/), qui propose beaucoup de démos, pour être honnête, pour comprendre mes besoins, je devrais utiliser Highstock, Cependant, après avoir examiné l’exemple de mise à jour dynamique de Highcharts, je peux aussi réaliser que mon interface de besoins est plus concise, donc cet article utilise le modèle de mise à jour dynamique dans Highcharts, et le type graphique est spline. La carte finale de l’effet est la suivante (le prix de Pinqijin est mis à jour toutes les 10 secondes, et un point est ajouté au graphique linéaire toutes les 10 secondes) :

Réussissez la collecte de pas :

Créez un nouveau site web avec VS et créez une page asp.net DynamicUpdate.aspx, le code de la page est le suivant :

Rendu de la propriété Highcharts indique les conteneurs d’affichage,

events représente l’événement que le conteneur doit enregistrer, où load signifie qu’il se produit après la fin du chargement, ici un minuteur JS est défini dans le chargement, qui se produit toutes les 10 secondes, et le code qu’il contient sert à demander le dernier GOLD depuis le fichier dataupdate.ashx du dossier ajaxhandler dans le même répertoire racine que la page DynamicUpdate.aspx via ajax dans jQuery Pour les données de prix de cette variété, voici pourquoi j’ajoute randomCode + « = » + oldrandomCode dans l’URL ajax car ajouter un nombre aléatoire peut éviter la mise en cache, et flag=1 est parce que mon fichier dataupdate.ashx veut accepter plusieurs requêtes de différents ajax, donc utilisez flag pour le distinguer

xAxis représente la collection d’attributs définis pour l’axe x du conteneur, type représente le type de texte affiché, optionnel, ici je remplis le type temps, ici notez que le temps par défaut pour l’instance est l’heure GMT, vous pouvez aussi utiliser l’heure UTC, mais nous utilisons généralement l’heure de Pékin, (GMT ou UTC) + 8 heures = heure de Pékin, donc lorsque nous utilisons l’ajax pour obtenir l’heure de Pékin, nous devrions soustraire 8 heures de l’heure (ici je veux aussi partager une expérience, Comment convertir l’heure serveur en temps js pouvant être utilisé par la méthode .getTime(), c’est-à-dire soustraire l’heure serveur de 1970-1-1, convertir les jours restants en millisecondes, puis attribuer une valeur au temps nouvellement initialisé via la méthode setTime en js, j’ai constaté que le résultat obtenu par getTime() est incorrect pour initialiser un temps js directement en js sous la forme de nouvelle Date (année, mois, jour, heure, minute, seconde, milliseconde) avec getTime(), Quant à la raison pour laquelle 1970-1-1 est soustrait, c’est parce que la définition de la méthode getTime() est d’obtenir le nombre de millisecondes à partir du temps actuel de 1970-1-1), lorsque l’axe des x n’est pas affiché comme un temps ou que vous devez le définir vous-même, il peut aussi être défini par l’attribut catégories, tickPixelInterval représente la densité de l’axe des x, et les étiquettes servent à formater le format d’affichage de l’axe des x

yAxe représente un ensemble d’attributs définis pour l’axe y du conteneur, qui est à peu près identique aux attributs de l’axe x, mais dans Highcharts il n’est pas possible de définir la valeur fixe de l’axe y à travers des catégories, l’axe y de Highcharts est automatiquement généré en fonction des données de points de coordonnées données, ce qui dépend du sous-attribut de données de l’attribut série, par exemple, lorsque vous attribuez une valeur à des données. La valeur maximale est 300, et la valeur minimale est 100. Ensuite, l’affichage de l’axe y sera entre 100 et 300, ou vous pouvez aussi définir l’attribut max ou min de yAxis

La série représente la collection de toutes les courbes affichées dans le conteneur, ici je n’en montre qu’une seule, le nom représente le nom de la courbe, les données représentent la collection d’une série de points de coordonnées de la courbe, x est devant, y est derrière, c’est un tableau js, dans ce cas, parce que l’axe des x indique le temps, donc la propriété x de l’objet tableau doit être fixée au temps, mais dans Highcharts elle n’est pas directement attribuée au temps de l’axe des x, À la place, le nombre de millisecondes entre 1970-1-1 et un certain temps est attribué à l’axe des x pour représenter ce temps, donc la méthode getTime() doit être utilisée, la forme du point de coordonnées de l’axe y doit être y = petit nombre * forme entière, et je ne comprenais pas pourquoi Highcharts devait faire cela, car les données de prix de la variété dans cet exemple sont généralement à peu près identiques, donc j’ai dû diviser par 200 lors de l’obtention des données, puis multiplier par 200 lors de l’attribution d’une valeur à l’axe des y.

< %= jsonstr %> dans le code de la page est la donnée initiale que je dois obtenir du serveur pour initialiser le graphe, la génération CS de la page

Parmi eux, la table TabMerPrice est la table d’information sur les prix variés, le temps TMPTime, le prix TMPPrice, l’intervalle de temps TMPTime est de dix secondes, j’utilise un travail de base de données pour générer l’enregistrement de la table, qui se produit toutes les dix secondes

AddHours(-8) sert à convertir l’heure en heure de Pékin, et le format de données généré est le format json

Le code dataupdate.ashx ressemble à ceci :

C’est l’implémentation approximative de l’agrégation par étapes, qui permet d’afficher en temps réel les données côté serveur avec un graphique similaire au format stock

HighCharts演示.zip (48.69 KB, Nombre de téléchargements: 1)