[JavaScript] Explication détaillée de l'affichage de plusieurs tableaux et graphiques statistiques sur la même page

Récemment, j'ai reçu une tâche de développement, qui m'obligeait à faire des statistiques sur les réponses aux commentaires renseignées par les clients dans le "Questionnaire de satisfaction client du service après-vente".

Un exemple de question est :

• Quand avez-vous acheté notre produit pour la dernière fois ?

• Le personnel de service est-il sympathique et consciencieux ?

• Que pensez-vous globalement du service après-vente fourni par notre entreprise ?

. . .

La fonction que je souhaite implémenter est de produire un rapport qui affiche le nombre total d'occurrences de chaque réponse pour chaque question sur la même page.

J'ai obtenu un effet simple, comme indiqué ci-dessous :

Bien sûr, les six icônes sont utilisées. les mêmes données de test, ce qui résout principalement le problème de mise en page de plusieurs graphiques apparaissant sur la même page.

Veuillez utiliser le lien ci-dessous pour tester l'effet. Vous pouvez utiliser les outils de développement Chrome pour afficher la mise en œuvre de 093_chart.html.

L'effet de l'ouverture sur le téléphone mobile.

Revoyons brièvement le code :

Chacun des deux ps contient 6 toiles. Le premier p est chargé d'afficher les résultats du problème avec 6 diagrammes circulaires, et les 6 toiles du second p affichent le diagramme à barres. J'ai utilisé l'attribut display:inline marqué !important sur chaque canevas pour forcer les graphiques statistiques situés dans le nœud du canevas à s'afficher de gauche à droite, au lieu de la valeur par défaut de retour à la ligne à chaque affichage.

function loaded(){
var totalWidth = getBodyNode().clientWidth;
console.log("width in load: " + totalWidth);
var aCharts = document.getElementsByTagName("canvas");
for( var i = 0; i < aCharts.length; i++){
aCharts[i].width = totalWidth / 6.5;
}
var option = {
type: "pie",
xAxisData: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
yAxisData: [12, 19, 3, 5, 2, 3],
yAxisLabel: "Number of Votes"
};
for( var i = 1; i <= 6; i++ ){
createChartOnCanvas("myChart" + i, option);
}
option.type = "bar";
for( var i = 1; i <= 6; i++ ){
createChartOnCanvas("barChart" + i, option);
}
}

La ligne 41 obtient la largeur totale de la fenêtre actuelle via l'attribut clientWidth du nœud body, puis la divise par 6,5. Le quotient est la largeur de chaque graphique statistique. La raison pour laquelle nous divisons par 6,5 au lieu de 6 est de laisser un peu d'espace entre les graphiques statistiques de chaque ligne.

Le type de graphique statistique, les données et les étiquettes des coordonnées X et Y sont transmis à la fonction createChartOnCanvas via l'objet option.

Recommandations associées :

Comment l'API JavaScript Baidu Map affiche plusieurs cartes sur la même page

Afficher plusieurs rapports iChart sur une seule page

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!