直接上代码

【官方文档请参见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. C++求一个十进制的二进制中1的个数

    int oneNumInBinary(int n){ ; while(n){ n = n&(n-); cnt++; } return cnt; }

  2. exit和return的区别

     主要有几下几个不同点:     1. return返回函数值,是关键字:exit是一个函数.     2. return是语言级别的,它表示了调用堆栈的返回:而exit是系统调用级别的,它表示了一个 ...

  3. 一些NSArray,NSDictionary,NSSet相关的算法知识

    iOS编程当中的几个集合类:NSArray,NSDictionary,NSSet以及对应的Mutable版本,应该所有人都用过.只是简单使用的话,相信没人会用错,但要做到高效(时间复杂度)精确(业务准 ...

  4. ubuntu安装mysql--PC端

    sudo apt-get update sudo apt-get install mysql-server mysql-client //密码:mmchong sudo netstat -tap|gr ...

  5. Elasticsearch之client源码简要分析

    问题 让我们带着问题去学习,效率会更高 1  es集群只配置一个节点,client是否能够自动发现集群中的所有节点?是如何发现的? 2  es client如何做到负载均衡? 3  一个es node ...

  6. sublimeText jsformat 插件被当做病毒 virus

    最近在个只可往他里面发邮件,不能往外上任何互联网的地方工作,用 sublimetext 要装个sublime 插件 jsformat 十分麻烦.用gmail邮箱发总是报病毒. 最后挨个尝试,发现是 j ...

  7. Javascript 中判断对象为空

    发现了一个巧妙的实现: 需要检查一个对象(Object)是否为空,即不包含任何元素.Javascript 中的对象就是一个字典,其中包含了一系列的键值对(Key Value Pair).检查一个对象是 ...

  8. Ubuntu14.04运行行roscore错误

    错误提示: 网络配置有问题,ping不同自己(ping localhost). vim ~/.bashrc 在底部加入: export ROS_HOSTNAME=localhostexport ROS ...

  9. html5，单击显示详细信息

    <details open="">    <summary>点击率</summary>        <p>详细信息</p&g ...

  10. Win7+Eclipse+Hadoop2.6.4开发环境搭建

    Hadoop开发环境搭建 感谢参考网站:http://www.cnblogs.com/huligong1234/p/4137133.html 一.软件准备 JDK:jdk-7u80-windows-x ...