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

Dawei Cheng

Traducteur

Mishulyna

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. Commentez .

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

- Auteur : Dawei Cheng

- Traducteur : Mishulyna

- Parution : 16 septembre 2014

- Licence :

Sommaire

- I. L'architecture iChartJS

- II. Tutoriel rapide pour diagrammes à colonnes

- III. Construire un diagramme circulaire

- IV. Construire un diagramme linéaire

- V. Résumé

- VI. Références

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.

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.

<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.

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.

$(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.

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 :

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
});

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 :

<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.

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

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