Highcharts图形显示扩展插件 结合ThinkPHP使用

Highcharts是一个JS的图形插件,能展示哪些图像请到官网查看。 
另外百度也有一个这样的图象库,地址是:http://echarts.baidu.com

#Highcharts插件演示放在examples中
#将examples中的column-rotated-labels里的index.htm复制到user模板下,改名为charts.html
#将charts.html中的js文件复制到相应的文件夹中

#案例

  #最终以:产品部:X人    管理部X人的柱状显示
  #主表sp_user  从表sp_dept  关联条件:t1.dept_id=t2.id
  #原生sql: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;  #deptname中有多个分类,用group分组后,就能显示不能分类的成员数量

控制器部分

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();
			$this->assign('data',$data);
			$this->display();
		}

charts.html部分修改

charts.html原数据部分代码
series: [{
        name: 'Population',
        data: [
            ['Shanghai', 23.7],
            ['Lagos', 16.1],
            ['Istanbul', 14.2],
            ['Karachi', 14.0],
            ['Mumbai', 12.5],
            ['Moscow', 12.1],
            ['São Paulo', 11.8],
            ['Beijing', 11.7],
            ['Guangzhou', 11.1],
            ['Delhi', 11.1],
            ['Shenzhen', 10.5],
            ['Seoul', 10.4],
            ['Jakarta', 10.0],
            ['Kinshasa', 9.3],
            ['Tianjin', 9.3],
            ['Tokyo', 9.0],
            ['Cairo', 8.9],
            ['Dhaka', 8.9],
            ['Mexico City', 8.9],
            ['Lima', 8.9]
        ],
将数据部分进行volist遍历输出,修改后代码
series: [{
        name: 'Population',
        data: [
        <volist name="data" id="vol">
            ['{$vol.deptname}', {$vol.count}],
        </volist>
        ],

显示后效果

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND