Verwendung des Plug-ins highcharts in thinkphp

[1] Einführung

(1) Einführung

Highcharts ist ein Fremdsymbol-Plug-in und ein statistisches Diagramm, das entwickelt wurde Basierend auf JQuery werden häufig Liniendiagramme, Kreisdiagramme usw. verwendet.

Es gibt auch ein ähnliches Plug-in Echarts in China, das von Baidu entwickelt wurde.

(2) Unterstützt Spezialeffekte-Demo: 3D, Dashboard, Rabatt, EKG-ähnliche Echtzeitaktualisierung, Spalte, Punkt, Radar, Trichter, Pyramide

Trichterdiagramm: Wird häufig für Verkäufe verwendet Trends: Die Spitzenreiter sind interessierte Nutzer und die Schlusslichter sind Transaktionskunden. Im Einzelnen gibt es die folgenden Kategorien

(3) Anwendungsbeispiele: Die nationale Online-Bevölkerungsverteilung von QQ erfolgt über Flash; die nationale Datenverteilung von Baidu erfolgt über js

Sehr intuitive Reflexion der Internetentwicklung Situation und Regionen in China. Je mehr Lichtblicke es gibt, desto weiter entwickelt ist das lokale Internet. Zu den entwickelten Gebieten gehören Peking, Shanghai, Guangzhou und Chongqing

(4) Echarts enthält umfangreichere Demos und wurde stark erweitert, einschließlich globaler Routen und Bestandsdatentrends

(5) Die Nutzung ist im Grunde das Gleiche

[2] Fall

Verwendung von Highcharts zur Implementierung der Abteilungsleiterzählung

Anforderung: Verwenden Sie Symbole, um die Anzahl der Personen in jedem zu zählen Abteilung

(1) Vorbereitung und Schritte:

1. Wählen Sie das Stilverzeichnis aus, hier verwende ich examples/column-rotated-labels

2. Analysieren Sie die Demo: ①Jquery und js einführen Klassendateien; ②Ersetzen Sie Datendaten; ③Anweisungs-Div-Symbolcontainer, der zum Platzieren von Symbolen verwendet wird

(2) Beginnen Sie mit dem Schreiben

1. Ändern Sie die Vorlagendatei User/showList.html und legen Sie einen Link fest Klicken Sie unten auf die Schaltfläche „Statistik“, und klicken Sie, um zur Statistikseite zu springen.

Hier müssen Sie nichts tun. Ändern Sie einfach die href des Tags a. Was soll geschrieben werden? Es hängt von der Methode ab

2. Definieren Sie die Diagramme der Symbolseitenmethode. Die Methode wird im Benutzercontroller geschrieben, daher wird die href als __CONTROLLER__/charts geschrieben

3. Definieren Sie die Diagrammmethode um die Diagrammvorlagendatei anzuzeigen

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

4. Kopieren Sie gleichzeitig die Vorlagendatei an den angegebenen Speicherort. Um online schneller auf die Website zugreifen zu können, müssen Sie die statische Ressourcendatei in das Site-Verzeichnis kopieren ;

①Hier wird nach User/charts kopiert, unter html

5. Schreiben Sie die chars-Methode neu, fragen Sie die Daten ab und ersetzen Sie die Daten in der Vorlagendatei

Analysieren Sie zuerst das Finale Datenformat: Produktabteilung: 10, Technologieabteilung 20, Außenministerium 30.... .

Es kann nicht nur eine Datentabelle implementiert werden, daher ist eine gemeinsame Tabellenabfrage erforderlich

Master-Tabelle

; Detaillierte Tabelle（sp_user、sp_dept）;

Zuordnungsbedingungen:sp_user（t1）sp_dept（t2）

Native SQL-Anweisungstabellenmethode:

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 wird nach der Ausführung in Navicat korrekt ausgegeben , also nächster

TP-kohärente Operation:

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

$data-Ergebnis ausgeben:

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"
  }
}

Wenn die aktuelle ThinkPHP-Version 5.6+ ist, können Sie die Daten direkt zweidimensional zuweisen Array ohne jegliche Verarbeitung. Versionen unter 5.6 erfordern String-Splicing

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

6. Übergeben Sie Variablen an die Vorlage

7. Ändern Sie die Vorlage und empfangen Sie Variablen. Löschen Sie das ursprüngliche Array und übergeben Sie stattdessen Variablen

(3) Verbessern Sie die Details data:{$str},
1. Ändern Sie den Header

                                                                                                                                                                                                                                                          tat Ändern Sie nicht die Einheiteninformationen auf der linken Seite. 🎜>

5. Für den Vorgang zum Drucken von Bildern müssen Sie highcharts.js ändern, ändern Sie es einfach über den Quellcode. Fragen Sie relevante Wörter ab, geben Sie sie ein und ändern Sie sie

Zusammenfassung:

(1).1f bedeutet auf eine Dezimalstelle genau (z. B. 3,0, 5,0), wenn Sie dies nicht tun Ich möchte es nicht. 0, es kann auf 0 Dezimalstellen genau sein (z. B. 3, 5)

Das Obige ist der gesamte Inhalt von ThinkPHP---Plug-in-Highcharts.

Verwandte Referenzen:

Thinkphp-Tutorial

Das obige ist der detaillierte Inhalt vonVerwendung des Plug-ins highcharts in thinkphp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!