直接上代码

【官方文档请参见http://www.highcharts.com/docs/working-with-data/getting-data-across-domains-jsonp】

【实例http://highcharts-mzm.rhcloud.com/】

1、index.html

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>Highcharts Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <style type="text/css">

            ${demo.css}

        </style>

        <script type="text/javascript">

$(document).ready(function() {

    var options = {

        chart: {

                renderTo: 'container',

                type: 'column'

            },

            title: {

                text: 'Highcharts Chart PHP with MySQL Example',

                x: -20 //center

            },

            subtitle: {

                text: 'Source: dongqiudi.com',

                x: -20

            },

            xAxis: {

                categories: [],

                title: {

                    text: 'team'

                }

            },

            yAxis: {

                title: {

                    text: 'score'

                },

                plotLines: [{

                        value: 0,

                        width: 1,

                        color: '#808080'

                    }]

            },

            tooltip: {

                valueSuffix: '个'

            },

            legend: {

                layout: 'vertical',

                align: 'right',

                verticalAlign: 'middle',

                borderWidth: 0

            },

            series: []

    };

    var url =  "http://yourip/getHighchartData.php?callback=?";

    $.getJSON(url,  function(data) {

        options.xAxis.categories = data[0]['data']; //xAxis: {categories: []}

        options.series[0] = data[1];

        options.series[1] = data[2];

        var chart = new Highcharts.Chart(options);

    });

});

        </script>

    </head>

    <body>

        <script src="../../js/highcharts.js"></script>

        <script src="../../js/modules/exporting.js"></script>

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

    </body>

</html>

2、getHighchartData.php

<?php

/*

 * Following code will list all the products

 */

// array for JSON response

$response = array();

// include db connect class

require_once __DIR__ . '/db_connect.php';

// connecting to db

$db = new DB_CONNECT();

// 查询主场进球及主场失球数据

$result = mysql_query("SELECT home_team, sum(score_home) as score_h, sum(score_visiting) as score_v FROM fbscore group by home_team") or die(mysql_error());

$bln = array();

$bln['name'] = 'team name';

$rows['name'] = 'home score';

$rows2['name'] = 'visiting score';

// check for empty result

if (mysql_num_rows($result) > 0) {

    while ($r = mysql_fetch_array($result)) {

        // temp user array

        //$array = $row["score_home"];

        array_push($array, $row[score_home]);

        $bln['data'][] = $r['home_team'];

        $rows['data'][] = $r['score_h'];

        $rows2['data'][] = $r['score_v'];

    }

    $rslt = array();

    array_push($rslt, $bln);

    array_push($rslt, $rows);

    array_push($rslt, $rows2);

    // echoing JSON response

    echo $_GET['callback']. '('. json_encode($rslt, JSON_NUMERIC_CHECK) . ')';

    //print json_encode($rslt, JSON_NUMERIC_CHECK);

} else {

    echo "error!";

}

3、效果图

highcharts php请求mysql返回json数据作为数据源进行制图的更多相关文章

  1. Query通过Ajax向PHP服务端发送请求并返回JSON数据

    Query通过Ajax向PHP服务端发送请求并返回JSON数据 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuer ...

  2. jquery的ajax异步请求接收返回json数据

    http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...

  3. jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    SON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教 ...

  4. MOOC（2）-Django开发get、post请求，返回json数据

    1.对get请求直接返回参数 如果请求多个参数,也只能返回一个参数,这里只返回了username参数 如果想要返回多个参数值,可以返回json格式数据 2.对get请求返回json数据 # views ...

  5. 【C#】WebService接受跨域请求及返回json数据

    问题概述 通过Web Service发布服务供客户端调用是一种非常简单.方便.快速的手段,并且服务发布后会有一个服务说明页面,直观明了,如图: 一般情况下,在web页面中的JavaScript中调用W ...

  6. Jquery通过ajax请求NodeJS返回json数据

    最近看了NodeJS相关的,在网上查了下结合AJAX的应用,感觉应用前景还是不错的.为什么用这个组合呢? 1.NodeJS不需要安装,拷贝过去就可以使用,而环境变量可以只配置在当前cmd窗口,运行方便 ...

  7. springboot拦截json后缀的请求，返回json数据

    需求:请求list.json返回以下数据 { "jsonResult": { "code": 200, "message": "查 ...

  8. nginx优化之请求直接返回json数据

    对于有些服务端接口返回是固定值的json,可通过配置nginx直接返回json,减少程序的加载对资源的占用,减少接口响应时间 location ~* (request/update)$ {     d ...

  9. ajax请求action返回json数据

    1,服务端: HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType(&q ...

随机推荐

  1. Dubbo学习

    可以看这个文档 http://dubbo.io/User+Guide-zh.htm 1.简介 Dubbo是一个框架,它能够暴露某个系统的服务接口,使得其他系统能够使用该系统的接口 Dubbo的框架如下 ...

  2. swift：谈谈swift几种常见属性的区别

    一.前奏 Swift作为一门新语言,经过几年的发展,逐渐趋于完善,目前已经更新到3.0版本,它汇集许多其他语言的特点,例如JS.Paython.C++等,完全区别于OC.个人感觉它没有完全的OOP和O ...

  3. linux配置tomcat以service方式启动（转）

    在/etc/init.d目录下新建文件,命名为tomcat 对tomcat文件进行编辑. cat /etc/init.d/tomcat #!/bin/bash # description: Tomca ...

  4. 错误-spring3.2的架构在tomcat6.0中无法正常启动，抛出java.lang.NoClassDefFoundError: javax/servlet/AsyncListener

    原因分析: 1:org.springframework.web.servlet-3.2支持Servlet3.0的版本. 2:tomcat6.0只支持Servlet2.5,而tomcat7.0支持Ser ...

  5. alert()、confirm()和prompt()的区别与用法

    1.警告消息框alertalert 方法有一个参数,即希望对用户显示的文本字符串.该字符串不是 HTML 格式.该消息框提供了一个"确定"按钮让用户关闭该消息框,并且该消息框是模式 ...

  6. windows远程控制ubuntu---基于ssh

    要实现windows下连接ubuntu需要安装以下软件: 1. windows下安装winSCP 2. Ubuntu下安装OpenSSH Server 可以使用命令行安装openSSH Server: ...

  7. chrome浏览器调试typescript

    在chrome的开发人员工具的配置项中,有一个sourcemap的选项,用来配置javascript源码和生成代码的关系. 如果能在浏览器中直接调试typescript代码,才能让我们真正体会到typ ...

  8. 如何创建一个简单的C++同步锁框架(译)

    翻译自codeproject上面的一篇文章,题目是:如何创建一个简单的c++同步锁框架 目录 介绍 背景 临界区 & 互斥 & 信号 临界区 互斥 信号 更多信息 建立锁框架的目的 B ...

  9. 总结ThinkPHP使用技巧经验分享(三)

    add方法返回主键(id)的值在往数据表中添加数据时调用add方法,默认返回值就是刚添加的id值,就不用再去查询了. save方法返回值的判断在修改数据时,如果修改成功返回的是被修改的记录数0,1,2 ...

  10. IOS关于不同字体和不同颜色的选择

    在项目中,用到一个功能,就是不同文字和不同颜色字体选择, 界面如下:,效果如下: 这个功能主要用到了textview的几个代理办法,其中一个重要的问题就是,在英文下和英文下的不同判断方式,以及是否有追 ...