Highcharts的简单使用

Stella981
• 阅读 495

今天找了一天的jquery图表插件,弄了一整天的Highcharts,记下来以备下次用到,我用的比较简单的,显示年份内的每个月的用户注册量,数据表详细就不用了,SQL执行后的效果是:

Highcharts的简单使用

后台operate.php文件内容是这样:

if ($Gaction == 'getchart'){  //这等同于$_GET['action'] == 'getchart'
    $query = $db->result_array("select DATE_FORMAT(from_unixtime(finishtime),'%Y') as years, DATE_FORMAT(from_unixtime(finishtime),'%c') as months,count(rid) as count from 2x3_servrecord where DATE_FORMAT(from_unixtime(finishtime),'%Y') = '2012' group by months ");  //这是用到自定义的一个mysql类
    $count = array('0','0','0','0','0','0','0','0','0','0','0','0'); //这是先自定义的12个月的数组
    if ($query){
    foreach ($query as $row){
        $count[$row['months']] = $row['count'];
    }
    }
    echo json_encode($count);        
}

前台展示要加载的两个JR文件就不列出来了,图表的JS是:

<script type="text/javascript">
<!--
$(function () {
    var chart;
    var options;
    $(document).ready(function() {
        var count;
        options = {
            chart: {
                renderTo: 'container1',
                type: 'column'
            },
            title: {
                text: '深圳二乘三科技技术有限公司'
            },
            subtitle: {
                text: '统计图'
            },
            xAxis: {
                categories: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
            },
            yAxis: {
                min: 0,
                title: {
                    text: '次数'
                }
            },
            legend: {
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                shadow: true
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.x +': '+ this.y +' 次';
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
                series: []
        };
        $.getJSON('index.php?m=2x3&a=operate',{
            'action':'getchart'
            },function(data){       
            var series = { // <-------------------- create just one series object
             type: 'column',
            name: '2012',
            data: [] //data array for new series
        };                  
        var i=0;
        for(i=0;i<=11;i++){
            var j =parseInt(data[i]);  //这个很重要,TNN的,弄了我好几小时才发现
            series.data.push(j);
        }
         options.series.push(series); // <-------- pushing series object
        var chart = new Highcharts.Chart(options);     
             });
    });   
});
//-->
</script>

图表的HTML显示是:

<div id="container1" style="min-width: 400px; height: 400px;margin:0 auto"></div>

这个例子上就有了。

最后显示效果图:

Highcharts的简单使用

数据有点少哈~

这个最难弄的就是从数据库中取出数据后怎么放入series: []里了,这个只是简易的2012的柱图,其它的可以触类旁通吧~

参考地址:http://stackoverflow.com/questions/7810098/php-json-highcharts-load-database-result

 ps:$count[$row['months']] = $row['count'];应改为$count[$row['months']-1] = $row['count'];不然就跳了一个月,2月数据跑到3月份显示去了~

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这