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

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.

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.

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.

<div id="canvasDiv"></div>

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

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.

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 :

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 :

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 :

new iChart.Pie2D({
  sub_option:{
    mini_label : true,
    mini_label_threshold_angle : 30 ,
    label:{
      fontsize:16,
      color:'#FFFFFF'
    }
  }
});

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 :

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 :

new iChart.Pie2D({
  separate_angle:60
});

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 :

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

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

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 :

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 :

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

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

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.

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.

1. Intel Developer Zone Android
2. Article Original (en Anglais)
3. www.ichartjs.com
4. xdk-software.intel.com
5. http://www.ichartjs.com/docs/en/
6. http://www.ichartjs.com/samples/index.html