技术CTO-关注编程入门知识,提供编程入门教程

您的位置: 首页 > 原创文章 > 正文

highcharts实例教程三:结合php与mysql生成条形图

来源: 技术CTO 阅读:

我们在之前分析了highcharts生成折线图和饼图的实例,这篇通过技术cto网一周的pv、uv为例,讲解利用highcharts生成条形图的实例。条形图,不仅可以对比不同项目之间的情况,还能清楚表达某个时间段一个项目的具体变化情况,也是我们经常使用的一个图表之一。
第一步:创建数据库保存一周网站的pv、uv情况;
CREATE TABLE `tiaoxingtu` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `pv` int(10) DEFAULT NULL,
  `uv` int(10) DEFAULT NULL,
  `did` int(10) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=8 DEFAULT CHARSET=utf8;

第二步:利用php程序获取网站一周pv、uv数据,我们知道highcharts能够渲染json格式的数据,因此通过php程序我们将数据转换为json格式;
include_once('connect.php');
$res = mysql_query("select * from tiaoxingtu");
while($row = mysql_fetch_array($res)){
    $pv[] = intval($row['pv']);
    $uv[] = intval($row['uv']);
}
$data = array(array("name"=>"pv","data"=>$pv),array("name"=>"uv","data"=>$uv));
$data = json_encode($data);
我们之前也强调了字符串的数字必须通过intval强制转换后highcharts才能识别,比如: $pv[] = intval($row['pv']);

第三步:编写js程序实现数据的渲染;
<script type="text/javascript" src="jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '技术CTO一周uv、pv直方图'
            },
            subtitle: {
                text: '来源: www.jscto.net'
            },
            xAxis: {
                categories: ['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: <?php echo $data?>
        });
    });
</script>
最后我们在网页body之间的任何地方加上<div id="container" style="width:600px;height:480px"></div>即可
最后效果:
\

本文出自技术CTO:http://www.jscto.net,转载请注明出处。

^_^ 如果您热爱技术、热爱编程,想与更多的朋友一起交流学习,欢迎加入本站官方QQ群:345733473 ^_^