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. 차트 템플릿 파일을 표시하는 차트 메소드를 정의합니다.

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

가 필요합니다.

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

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