Développer des applications de présentation de diagrammes HTML5 pour les appareils Android et Win8

Les diagrammes sont l'un des éléments clés des applications d'affaires, et un grand nombre de clients ont tendance à les utiliser sur les appareils mobiles. Par conséquent, la façon de garder les mêmes performances de l'application sur les ordinateurs de bureau ainsi que sur plate-forme mobile est importante. Dans cet article, nous allons présenter une bibliothèque HTML5 multiplate-forme appelée iChartJS, qui pourrait créer facilement des présentations de diagrammes tant sur appareils Android que sur ultrabooks/tablettes Windows 8. Elle supporte la plupart des diagrammes connus, tels que diagrammes circulaires, diagrammes linéaires, graphiques en aires, diagrammes à colonnes et à barres, etc. En outre, chacun d'entre eux pourrait être développé et empaqueté en applications hybrides (Android, iOS, WP, Win8, Web) avec Intel XDK Tools.

Les commentaires et les suggestions d'amélioration sont les bienvenus, alors, après votre lecture, n'hésitez pas. 2 commentaires Donner une note à l'article (5).

Article lu   fois.

Les deux auteur et traducteur

Traducteur : Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. L'architecture iChartJS

iChartJS est une bibliothèque pour le développement d'applications HTML5 avec diagrammes, elle prend en charge Android, iOS et Windows. L'application pourrait garder la même mise en page entre les différentes plates-formes. Elle est distribuée sous licence Apache 2.0.

Image non disponible

Element : la classe racine, définit les informations de configuration.

Painter : classe racine graphique, toutes les fonctions de peinture sont définies dans cette classe.

Chart : toutes les configurations concernant les diagrammes sont définies dans cette classe.

Component : classe parente des composants des diagrammes.

Html : inclut toutes les classes, qui sont construites en HTML, le style CSS de base et l'animation.

II. Tutoriel rapide pour diagrammes à colonnes

Commençons par un diagramme à colonnes pour apprendre le fonctionnement de base de iChartJS :

  1. Incluez iChartJS dans votre fichier HTML.

     
    Sélectionnez
    <script type="text/javascript" src="ichart-1.2.min.js"></script>
  2. Définissez vos données sources en JavaScript. Dans cette démonstration, nous avons défini dix ensembles de données.

     
    Sélectionnez
    var data = [
        {name : 'H',value : 7,color:'#a5c2d5'},
        {name : 'E',value : 5,color:'#cbab4f'},
        {name : 'L',value : 12,color:'#76a871'},
        {name : 'L',value : 12,color:'#76a871'},
        {name : 'O',value : 15,color:'#a56f8f'},
        {name : 'W',value : 13,color:'#c12c44'},
        {name : 'O',value : 15,color:'#a56f8f'},
        {name : 'R',value : 18,color:'#9f7961'},
        {name : 'L',value : 12,color:'#76a871'},
        {name : 'D',value : 4,color:'#6f83a5'}
    ];
  3. Définissez d'autres composants dans le diagramme à barres, y compris l'en-tête, les marges, la largeur et la hauteur.

     
    Sélectionnez
    $(function(){
        new iChart.Column2D({
        render: 'canvasDiv', //Render object
        data: data,//Binding source data
        title :{ text:'Hello World\'s Height In Alphabet'}, // définit l'en-tête
        width : 800, //définit la largeur
        height : 400, //définit la hauteur
        coordinate:{ //définit les coordonnées
        scale:[{
           position:'left', //valeur sur la gauche
           start_scale:0, //valeur de début
           end_scale:26, //valeur de fin
           scale_space:2, //distance de séparation
           listeners:{
            parseText:function(t,x,y){
               return {text:t+" CM"}//valeur personnalisée
            }
           }
           }]
        }
        }).draw();//render the graph
    });
  4. La dernière étape est de créer un objet Canvas en HTML.
 
Sélectionnez
<div id="canvasDiv"></div>

Ouvrez votre navigateur, le diagramme à barres est prêt comme ci-dessous.

Image non disponible

Si vous avez besoin que le diagramme s'adapte automatiquement à l'écran, vous devez remplacer dans le code les valeurs de la hauteur et de la largeur par fit: true. Puis ouvrez-le sur vos appareils mobiles, il pourra s'adapter automatiquement à la résolution de l'écran de votre appareil.

Image non disponible

III. Construire un diagramme circulaire

Les diagrammes en secteurs sont principalement utilisés pour afficher les parties d'une relation globale. Ça pourrait mettre en évidence la proportion de données, mais ne convient pas pour afficher de grandes quantités de données.

Dans un diagramme circulaire, la direction trois heures est définie comme direction par défaut. Cependant, l'utilisateur peut également la modifier via le paramètre offset_angle. La valeur positive représente le mouvement dans le sens des aiguilles d'une montre, tandis que la valeur négative représente le mouvement en sens inverse des aiguilles d'une montre.

Par exemple, si nous voulons modifier l'angle à partir de la direction midi, le code source sera :

 
Sélectionnez
new iChart.Pie2D({
  offset_angle :-90
});

Dans certaines situations particulières, vous pouvez également définir un rayon approprié. Ne vous inquiétez pas, la modification du rayon est disponible dans toutes les situations. Essayons de définir le rayon de 120 px par les codes suivants :

 
Sélectionnez
new iChart.Pie2D({
  radius:120
});

L'exemple suivant présente la configuration d'une étiquette pour répondre aux besoins visuels particuliers. Par exemple, dans certains cas, nous pouvons avoir besoin de supprimer l'étiquette élargie dans un petit diagramme. La mini étiquette est le bon choix, il vous suffit de commuter vers elle :

mini_label: true.
mini_label_threshold_angle est conçu pour ajuster l'angle minimum de la mini étiquette en cas de conflit d'affichage.

Un exemple de code source pour un diagramme circulaire avec mini étiquette :

 
Sélectionnez
new iChart.Pie2D({
  sub_option:{
    mini_label : true,
    mini_label_threshold_angle : 30 ,
    label:{
      fontsize:16,
      color:'#FFFFFF'
    }
  }
});
Image non disponible

L'événement dans le diagramme circulaire est déterminé par les composants de ce diagramme, tels que des segments, illustrations et étiquettes. Un exemple de création d'événements dans un segment est montré ci-dessous :

 
Sélectionnez
new iChart.Pie2D({
  sub_option:{
    listeners:{
      click:function(c,e){
         // . . .
      }
    }
  }
});

Peut-être avez-vous aussi besoin de séparer la distance de chaque élément ? La modification du paramètre separate_angle vous aidera à atteindre votre objectif. L'angle pourrait prendre des valeurs de 0 à 90, avec une valeur par défaut de 30.

Si nous modifions la valeur de l'angle à 60 dans le code source ci-dessous, l'effet visuel est celui montré plus bas :

 
Sélectionnez
new iChart.Pie2D({
  separate_angle:60
});
Image non disponible

IV. Construire un diagramme linéaire

Si vous voulez construire un diagramme linéaire, c'est également très simple avec iChartJS et pas besoin de s'inquiéter de la différence de performances multiplates-formes. Tout d'abord, vous devez inclure iChartJS dans le fichier HTML comme ci-dessous :

 
Sélectionnez
<script type="text/javascript" src="ichart-1.2.min.js"></script>

Et puis configurer votre source de données au format :

 
Sélectionnez
var data = [
  {name : 'H',value : 7,color:'#a5c2d5'},
  {name : 'E',value : 5,color:'#cbab4f'}, 
  // . . .

];

L'étape suivante est de créer un objet diagramme linéaire en JavaScript :

 
Sélectionnez
new iChart.LineBasic2D ({
  sub_option{
    // . . .
  }
});

Vous avez peut-être constaté qu'il y a beaucoup d'options de paramètres en sub_option. Dans cet exemple, nous avons mis point_size à 8, hollow à false, smooth à true. Les codes sources sont montrés ci-dessous :

 
Sélectionnez
new iChart.LineBasic2D ({
  sub_option:{
    smooth : true,
    point_size:8,
    hollow: false
  }
});

Maintenant, nous voyons l'effet visuel du diagramme linéaire :

Image non disponible

Il y a encore beaucoup d'autres diagrammes décoratifs qui pourraient être construits avec iChartJS, qui sont entièrement pris en charge par les deux plates-formes Android et Windows. À la fin, je voudrais montrer quelques exemples, qui sont construits avec iChartJS.

Image non disponible
Image non disponible
Image non disponible
Image non disponible

V. Résumé

Dans cet article, nous avons présenté une bibliothèque multiplate-forme populaire pour graphiques HTML5 appelée iChartJs, présenté des tutoriels rapides sur la façon de construire des diagrammes à colonnes, circulaires et linéaires. Il y a encore beaucoup d'autres types de graphiques dans cette bibliothèque, vous pouvez les trouver sur le site officiel www.ichartjs.com. En outre, si vous souhaitez développer des applications Android ou Windows 8, Intel XDK est une bonne option pour vous. iChartJs fonctionne parfaitement avec Intel XDK. Allez à xdk-software.intel.com, il y a beaucoup de démonstrations et tutoriels sur la création d'applications HTML5 avec les bibliothèques externes.

VI. Références

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+