Video Learning Transcript---thinkphp---plugin highcharts

An introduction to "one"

(1) Introduction

Based on the development of jquery foreign icon plug-ins, statistical charts, line charts, pie charts are often used.

Domestic also has a similar plug-in Echarts, developed by Baidu.

(2) Official website: www.highcharts.com enthusiasts to write integrated website: www.hcharts.cn

Official website: https://www.highcharts.com/products/highcharts

Demo URL: Www.highcharts.com/demo

(3) Support special Effects demo:3d, instrument panel, discounted, ECG real-time refresh, columnar, dot-like, radar, funnel, pyramid

Funnel chart: Often used for sales trend, the top is intended to the user, the bottom of the deal customers. The following are the specific categories

(4) Application example: QQ National online number distribution, through flash do; Baidu echarts national data distribution, through JS do

Very intuitive to reflect the development of China's Internet and the region. The more highlights the more The local Internet is more developed. Developed areas have North Canton, Chongqing

(5) Echarts contains a richer demo, expanding many, including global routes, stock data movement

(6) The usage is basically consistent

"Two" cases

Use Highcharts to achieve departmental headcount statistics

Requirements: Count the number of people in each department using the icon form

(1) Preparation and steps:

1. Choose the style directory, where I use the examples/column-rotated-labels;

2. Analysis Demo:① The introduction of jquery and JS class files; ② replace data; ③ Declaration div icon container for placing icons

(2) Start writing

1. Modify the template file user/showlist.html, the following statistics button to set the link, click to jump to the statistics page

There is no need to do anything here, so just modify the href of the a tag and write what? It depends on the method.

2. Define the Icon page method charts, the method is written in the user controller, so href is written as __controller__/charts

3. Define Charts Method presentation Chart template file

// Charts Chart  Public function charts () {       $this,display ();}

4. Copy the template file to the specified location, and 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,html under;

② introduces static resources and modifies paths: For convenience, I copied the entire code directly into the static resource directory, and the later plugins were put into the plugin (plugin) directory.

5.

Video Learning Transcript---thinkphp---plugin highcharts