Utilisation de highcharts de plug-in dans thinkphp

[1] Introduction

(1) Introduction

Highcharts est un plug-in d'icônes étrangères et un graphique statistique développé basés sur jquery, des graphiques linéaires, des diagrammes circulaires, etc. sont souvent utilisés.

Il existe également un plug-in echarts similaire en Chine, développé par Baidu.

(2) Prise en charge de la démo d'effets spéciaux : 3D, tableau de bord, remise, rafraîchissement en temps réel de type ECG, colonne, point, radar, entonnoir, pyramide

Graphique en entonnoir : couramment utilisé pour les ventes tendances, les premiers sont les utilisateurs intéressés et les derniers sont les clients transactionnels. Plus précisément, il existe les catégories suivantes

(3) Exemples d'application : répartition nationale de la population en ligne de QQ, effectuée via Flash ; distribution nationale des données de Baidu echarts, effectuée via js

Développement Internet par réflexion très intuitive. situation et régions en Chine. Plus il y a de points lumineux, plus l’Internet local est développé. Les zones développées incluent Pékin, Shanghai, Guangzhou et Chongqing

(4) les graphiques électroniques contiennent des démos plus riches et ont été considérablement étendus, y compris les itinéraires mondiaux et les tendances des données boursières

(5) L'utilisation est fondamentalement le même

[2] Cas

Utilisation de Highcharts pour mettre en œuvre le décompte des chefs de service

Exigence : utiliser le formulaire d'icône pour compter le nombre de personnes dans chaque département

(1) Préparation et étapes :

1. Sélectionnez le répertoire de style, ici j'utilise examples/column-rotated-labels

2. Analysez la démo : ①Introduisez jquery et js; ②Remplacer les données; ③Conteneur d'icônes div de déclaration, utilisé pour placer les icônes

(2) Commencez à écrire

1. Modifiez le fichier modèle User/showList.html, définissez un lien vers le bouton statistiques ci-dessous, et cliquez pour accéder à la page des statistiques

Il n'y a rien à faire ici, il suffit donc de modifier directement le href de la balise a. Que faut-il écrire ? Cela dépend de la méthode

2. Définissez les graphiques de la méthode de la page d'icônes La méthode est écrite dans le contrôleur utilisateur, donc le href est écrit comme __CONTROLLER__/charts

3. Définissez la méthode des graphiques. pour afficher le fichier du modèle de graphique

//charts图表
 public function charts(){
       $this->display();
 }

4. Copiez le fichier du modèle à l'emplacement spécifié en même temps, afin d'accéder plus rapidement au site Web en ligne, vous devez copier le fichier de ressources statiques dans le répertoire du site ; ;

①Ici est copié dans User/charts, sous html;

5. Réécrivez la méthode chars, interrogez les données et remplacez les données dans le fichier modèle

Analysez d'abord le résultat final. format de données : Département produit : 10, Département technologie 20, Ministère des Affaires étrangères 30.... .

Une seule table de données ne peut pas être implémentée, une requête de table commune est donc requise

Table principale

 ; Table détaillée（sp_user、sp_dept）;

Conditions d'association :sp_user（t1）sp_dept（t2）

Méthode de table d'instructions SQL native :

select t2.name as deptname,count(*) as count from sp_user as t1,sp_dept as t2 where t1.dept_id=t2.id group by deptname;

t1.dept_id = t2.id sort correctement après son exécution dans Navicat , donc ensuite

Opération cohérente TP :

public function charts(){
$model = M();                //连贯操作
$data = $model->field('t2.name as deptname,count(*) as count')->table('sp_user as t1,sp_dept as t2')
     ->where('t1.dept_id=t2.id')->group('deptname')->select();
dump($data);die;
$this->display();
            }

sortie $data result :

array(3) {
  [0] => array(2) {
    ["deptname"] => string(9) "人力部"
    ["count"] => string(1) "3"
  }
  [1] => array(2) {
    ["deptname"] => string(9) "技术部"
    ["count"] => string(1) "2"
  }
  [2] => array(2) {
    ["deptname"] => string(9) "财务部"
    ["count"] => string(1) "3"
  }
}

Si la version actuelle de ThinkPHP est 5.6+, vous pouvez directement attribuer les données en deux dimensions tableau sans aucun traitement. Les versions inférieures à 5.6 nécessitent un épissage de chaînes

  $str = "[";//循环遍历字符串
        foreach ($data as $key => $value) 
     {                    
      $str .= "['".$value['deptname']."',".$value['count']."],";
     } //去除最后的，
      $str = rtrim($str,',');                
      $str .= "]";

6. Passez les variables au modèle

7. Modifiez le modèle et recevez les variables. Supprimer le tableau d'origine et transmettre les variables à la place

(3) Améliorer les détails data:{$str},
1. Modifier l'en-tête

                                                                                                                                                                                                                                                                             fait ne modifiez pas les informations sur l'unité à gauche. 🎜>

5. Quant au fonctionnement de l'impression des images, vous devez modifier highcharts.js, il suffit de le modifier à partir du code source. Recherchez et saisissez les mots pertinents et modifiez-les

Résumé :

(1).1f signifie précis à 1 décimale (comme 3,0, 5,0), si vous ne le faites pas Je ne le veux pas. 0, il peut être précis à 0 décimale près (comme 3, 5)

Ce qui précède est l'intégralité du contenu de ThinkPHP --- plug-in highcharts.

Références associées :

tutoriel thinkphp

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!