Use of the plug-in highcharts in thinkphp

[1] Introduction

(1) Introduction

Highcharts is a foreign icon plug-in and statistical chart developed based on jquery. Line charts, pie charts, etc. are often used.

There is also a similar plug-in echarts in China, developed by Baidu.

(2) Support special effects demo: 3D, dashboard, discount, ECG-like real-time refresh, columnar, dotted, radar, funnel, pyramid

Funnel chart: commonly used for sales trends, The top ones are interested users, and the bottom ones are transaction customers. Specifically, there are the following categories

(3) Application examples: QQ’s national online population distribution, done through Flash; Baidu echarts’ national data distribution, done through js

is very intuitively reflected Internet development situation and regions in China. The more bright spots, the more developed the local Internet is. Developed areas include Beijing, Shanghai, Guangzhou, and Chongqing

(4) echarts contains richer demos and has been expanded a lot, including global routes and stock data trends

(5) The usage is basically the same

[2] Case

Use Highcharts to implement department head count

Requirement: Use icon form to count the number of people in each department

(1) Preparation and steps:

1. Select the style directory, here I use examples/column-rotated-labels;

2. Analyze the demo: ①Introduce jquery and js Class file; ② Replace data data; ③ Declare div icon container to place icons

(2) Start writing

1. Modify the template file User/showList.html and add the following statistics Click the button to set the link and jump to the statistics page

There is no need to do anything here, so just modify the href of the a tag directly. What should be written? It depends on the method

2. Define the icon page method charts. The method is written in the User controller, so the href is written as __CONTROLLER__/charts

3. Define the charts method to display the chart template File

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

4. Copy the template file to the specified location; at the same time, in order to access the website faster online, you need to copy the static resource file to the site directory;

①Here is copied to User/charts , under html;

②Introduce static resources and modify the path: For convenience, I directly copied the entire code to the static resource directory, and the plug-ins used later are placed in the plugin directory

5. Rewrite the chars method, query the data, and replace the data in the template file

First analyze the final data format: Product Department: 10, Technology Department 20, Ministry of Foreign Affairs 30.... .

This cannot be achieved with just one data table, so joint table query is required(sp_user, sp_dept)

Main tablesp_user(t1);From Tablesp_dept(t2);

Association conditions: t1.dept_id = t2.id

Native SQL statement table method:

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;

The output is correct after running in Navicat, so the next

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

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

If the current ThinkPHP version is 5.6, you can directly assign the data two-dimensional array without any processing. Versions below 5.6 require string splicing

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

      6. Pass variables to the template;

        7. Modify the template and receive variables. Delete the original array and pass variables instead

data:{$str},

(3) Improve the details

1. Modify the header

2. Modify the unit information on the left

3. Modify the mouse hover effect (as of now)

4. Modify the decimal point on the icon (change 1f to 0f, meaning accurate to 0 digits);

5. As for the operation of printing pictures, you need to modify highcharts.js, just modify it from the source code. Query and enter relevant words and modify them

Summary:

(1).1f means accurate to 1 decimal place (such as 3.0, 5.0), if you don’t want it. 0, it can be accurate to 0 decimal places (such as 3, 5)

The above is the entire content of ThinkPHP---plug-in highcharts.

Related references:thinkphp tutorial

The above is the detailed content of Use of the plug-in highcharts in thinkphp. For more information, please follow other related articles on the PHP Chinese website!