【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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
