thinkphp でのプラグイン highcharts の使用

[1] はじめに

(1) はじめに

Highcharts は海外で開発されたアイコン プラグインおよび統計グラフです。 jqueryベースで、折れ線グラフや円グラフなどがよく使われます。

中国にも、Baidu が開発した同様のプラグイン echarts があります。

(2) 特殊効果デモのサポート: 3D、ダッシュボード、割引、ECG のようなリアルタイム更新、柱状、点線、レーダー、ファネル、ピラミッド

ファネル チャート: 営業に一般的に使用されます。トレンド、上が興味のあるユーザー、下がトランザクション顧客です。具体的には、次のカテゴリがあります

(3) 適用例: QQ の全国オンライン人口分布 (Flash を介して実行)、Baidu echarts の全国データ分布 (js を介して実行)

はインターネットを非常に直感的に反映しています中国の開発状況と地域。明るいスポットが多いほど、ローカル インターネットがより発達しています。開発地域には北京、上海、広州、重慶が含まれます

(4) echarts にはより豊富なデモが含まれており、世界の路線や在庫データの傾向を含めて大幅に拡張されました

(5) 使用方法は次のとおりです。基本的に同じ

[2] ケース

ハイチャートを使用して部門長カウントを実装する

要件: アイコン フォームを使用して部門の人数をカウントする各部門

(1) 準備と手順:

1. スタイル ディレクトリを選択します。ここでは examples/column-rotated-labels;

## を使用します。 # 2. デモを分析する: ① jquery と js Class ファイルを導入する; ② データ データを置き換える; ③ アイコンを配置する div アイコン コンテナを宣言する

(2) 記述を開始する

1. テンプレート ファイルを変更するUser/showList.html に次の統計を追加します ボタンをクリックしてリンクを設定し、統計ページにジャンプします

ここでは何もする必要はありませんので、a タグの href を直接変更するだけです。書くべきですか？メソッドに依存します

2. アイコン ページ メソッド チャートを定義します。メソッドはユーザー コントローラーに記述されるため、href は __CONTROLLER__/charts

として記述されます。 3. チャート メソッドを定義します。グラフ テンプレート ファイル

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

を表示するには 4. テンプレート ファイルを指定した場所にコピーします。同時に、オンラインで Web サイトにより速くアクセスするには、静的リソース ファイルをサイト ディレクトリにコピーする必要があります。 ;

①ここは html の下の User/charts にコピーされます;

②静的リソースを導入し、パスを変更します: 便宜上、コード全体を静的リソース ディレクトリに直接コピーし、プラグイン後で使用する -ins はプラグイン ディレクトリに配置されます。

5. chars メソッドを書き換え、データをクエリし、テンプレート ファイル内のデータを置き換えます。

最初に最終的なデータ形式を分析します: 製品部門: 10、技術局 20、外務省 30.... .

これは 1 つのデータ テーブルだけでは実現できないため、結合テーブル クエリが必要です

(sp_user, sp_dept)

メインテーブル

sp_user(t1);テーブルからsp_dept(t2);

関連付け条件:

t1.dept_id = t2。 id

ネイティブ SQL ステートメント テーブル メソッド:

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;

Navicat での実行後の出力は正しいため、次の

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

$data の結果を出力:

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

現在の ThinkPHP バージョンが 5.6 の場合は、何も処理せずにデータの 2 次元配列を直接割り当てることができます。 5.6 より前のバージョンでは文字列のスプライシングが必要です

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

6. 変数をテンプレートに渡します;

7. テンプレートを変更して変数を受け取ります。元の配列を削除し、代わりに変数を渡します

data:{$str},

(3) 詳細を改善します

1.ヘッダーを変更します。

2. 左側のユニット情報を変更します。

3. マウスホバー効果を変更します (現時点)

# 4. ヘッダーの小数点を変更します。 icon (1f を 0f に変更、0 桁まで正確であることを意味します);

5. 画像を印刷する操作については、highcharts.js を変更する必要がありますが、ソース コードから変更するだけです。関連する単語をクエリして入力し、修正します。

概要:

(1).1f は、小数点以下 1 桁まで正確であることを意味します (3.0、5.0 など)。 't want it. 0、小数点以下 0 桁まで正確です (3、5 など)

上記は、ThinkPHP---プラグイン ハイチャートの内容全体です。

関連参照:

thinkphp チュートリアル

以上がthinkphp でのプラグイン highcharts の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。