thinkphp에서 플러그인 하이차트 사용하기

【1】소개

(1) 소개

Highcharts는 jquery를 기반으로 개발된 외국 아이콘 플러그인으로 통계 차트, 꺾은선형 차트, 원형 차트 등에 자주 사용됩니다.

중국에도 Baidu에서 개발한 유사한 플러그인 전자 차트가 있습니다.

(2) 특수 효과 데모 지원: 3D, 대시보드, 할인, 심전도와 같은 실시간 새로 고침, 열, 포인트, 레이더, 깔때기, 피라미드

깔때기형 차트: 판매 동향에 자주 사용되며 상단이 대상 사용자입니다. , 하단 거래 고객의 경우. 구체적으로 다음과 같은 카테고리가 있습니다

(3) 적용 사례: Flash를 통해 수행된 QQ의 전국 온라인 인구 분포; js를 통해 수행된 Baidu echarts의 전국 데이터 분포는

중국의 인터넷 발전과 지리를 매우 직관적으로 반영합니다. 밝은 점이 많을수록 로컬 인터넷이 더 발전된 것입니다. 개발 지역에는 베이징, 상하이, 광저우, 충칭이 포함됩니다

(4) echarts에는 더욱 풍부한 데모가 포함되어 있으며 글로벌 경로 및 주식 데이터 동향을 포함하여 많이 확장되었습니다

(5) 사용법은 기본적으로 동일합니다

[2] 사례

하이차트 사용 부서 인원수 통계 구현

요구사항: 아이콘을 사용하여 각 부서의 인원수 계산

(1) 준비 및 단계:

1. 스타일 디렉토리를 선택합니다. 여기서는 예제/를 사용합니다. column-rotated-labels code>;<code>examples/column-rotated-labels；

        2. 分析demo：①引入jquery和js类文件；②替换data数据；③声明div图标容器，用来放置图标

（2）开始编写

        1. 修改模板文件User/showList.html，将下面的统计按钮设置链接，点击后跳到统计页面

            这里不用做任何操作，所以直接修改a标签的href即可，写成什么呢？这要看方法了

        2. 定义图标页面方法charts，方法写在了User控制器里，所以href写为__CONTROLLER__/charts

        3. 定义charts方法展示图表模板文件

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

4. 复制模板文件到指定位置；同时为了更快在线上访问网站，需要复制静态资源文件到站点目录下；

①这里是复制到User/charts,html下；

②引入静态资源并修改路径：这里为了方便，我直接把整个code复制到了静态资源目录下，后期使用的插件都放到plugin(插件)目录下

5. 改写chars方法，查询出数据，替换模板文件中的数据

先分析下最终数据格式：,产品部：10，技术部20，外交部30......

仅仅一个数据表无法实现，所以需要联表查询（sp_user、sp_dept）

主表sp_user（t1）；从表sp_dept（t2）；

关联条件：t1.dept_id = t2.id

原生SQL语句table方法：

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+，则可以直接将data二维数组assign，不需要任何处理。5.6以下版本需要进行字符串拼接

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

           6. 变量传递给模板；

           7. 修改模板，接收变量。删除原先的数组，改为传递变量即可

data:{$str},
2. 데모 분석: ①jquery 및 js 클래스 파일 소개, ②데이터 데이터 교체, ③div 아이콘 컨테이너를 선언하여 아이콘 배치

(2) 작성 시작

1. 템플릿 파일 수정 User/showList.html, 다음 통계 버튼을 설정하여 링크를 설정하고 클릭하면 통계 페이지로 이동합니다. 여기서는 어떤 작업도 수행할 필요가 없으므로 A 태그의 HREF를 직접 수정할 수 있습니다. 쓴? 메소드에 따라 다릅니다

2. 아이콘 페이지 메소드 차트를 정의합니다. 메소드는 User 컨트롤러에 작성되므로 href는 __ControlLER__/charts

로 작성됩니다. 3. 차트 템플릿 파일을 표시하는 차트 메소드를 정의합니다.

4. 동시에 지정된 위치에 템플릿 파일을 복사합니다. 온라인으로 더 빠르게 웹사이트에 액세스하려면 정적 리소스 파일을 사이트 디렉터리에 복사해야 합니다.

        ①여기에 사용자/차트, html이 복사됩니다. ;

        ②정적 리소스 도입 및 경로 수정: 여기서는 편의상 전체 코드를 정적 리소스 디렉터리에 직접 복사했고, 나중에 사용되는 플러그인은 플러그인 디렉터리에 배치됩니다.

5. chars 메서드, 쿼리를 다시 작성합니다.

먼저 분석해 보겠습니다. 최종 데이터 형식: 제품부: 10, 기술부 20, 외교부 30...

단 하나의 데이터 테이블로는 불가능합니다. 따라서 공동 테이블 쿼리 (sp_user, sp_dept)

가 필요합니다.

마스터 테이블 sp_user (t1); 슬레이브 테이블 sp_dept (t2); 연관 조건: t1.dept_id = t2.id

기본 SQL 문 테이블 방법: rrreee 출력은 Navicat에서 실행한 후 정확하므로 다음

TP 일관된 작업: 🎜rrreee🎜Output $data 결과: 🎜rrreee🎜현재 ThinkPHP 버전이 5.6 이상인 경우 아무런 처리 없이 데이터 2차원 배열을 직접 할당할 수 있습니다. 5.6 이하 버전에서는 문자열 접합이 필요합니다. 🎜rrreee🎜         6. 변수를 템플릿에 전달합니다. 🎜🎜             7. 템플릿을 수정하고 변수를 받습니다. 원래 배열을 삭제하고 대신 변수를 전달하세요🎜🎜data:{$str},🎜🎜🎜 (3) 세부 사항 개선🎜🎜 1. 헤더 수정 🎜🎜 2. 왼쪽 단위 수정 정보 🎜🎜 3. 마우스 호버 효과 수정(현재까지) 🎜🎜 4. 아이콘의 소수점 수정(1f를 0f로 변경, 정확도가 0자리임을 나타냄) 🎜🎜 5. 사진 인쇄 작업에 관해서는, highcharts.js를 수정해야 합니다. 소스 코드에서 수정하면 됩니다. 관련 단어를 쿼리하고 입력하고 수정하세요 🎜🎜🎜 요약: 🎜🎜🎜 (1).1f는 소수점 이하 1자리까지 정확하다는 의미입니다(예: 3.0, 5.0). .0을 원하지 않으면 0까지 정확할 수 있습니다. 소수점 자리(예: 3, 5) 🎜🎜위 내용은 ThinkPHP---플러그인 하이차트의 전체 내용입니다. 🎜🎜관련 참조: 🎜🎜thinkphp 튜토리얼🎜🎜🎜

위 내용은 thinkphp에서 플러그인 하이차트 사용하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!