直接上代码

【官方文档请参见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. redis学习教程地址

    http://www.yiibai.com/redis/redis_quick_guide.html

  2. 使用"关键词"来整理自己的知识库

    以前一直使用MyBase作为整理知识的工具,但是用到后来发现,当整理的知识越来越多时,树形目录的节点个数就会变得越来越庞大,层次越来越深,反而很难定位要查看或编辑的知识.最近发现使用"关键字 ...

  3. 点击链接跳转到固定div位置处（类似锚点链接）

    $('.joinbtn').click(function(){ var a = $("#contact").offset().top;$("html,body" ...

  4. 以rem为单位根据移动设备的分辨率动态设置font-size

    无需指定font-size的大小 <script> // //- 设置根元素fontSize~ // (function (doc, win) { // var _root = doc.d ...

  5. Spring常见问题-通配符的匹配很全面, 但无法找到元素 'aop:aspectj-autoproxy' 的声明

  6. centos7作为web服务器优化

    centos7作为web服务器优化 原文 http://itindex.net/detail/51140-centos7-web-服务器 1.加大打开文件数的限制(open files) 查看 uli ...

  7. php cUrl模拟登录，cookie保存到文件中

    源码如下: <?php header("Content-Type:text/html;charset=utf-8"); //模拟群友通讯录手机号登录 $curl = curl ...

  8. The connection to adb is down, and a severe error has occured.（转）

    启动android模拟器时.有时会报The connection to adb is down, and a severe error has occured.的错误.在网友说在任务管理器上把所有ad ...

  9. c++ DLL->DEF->LIB

    一.DLL->DEF https://support.microsoft.com/zh-cn/kb/177429 https://msdn.microsoft.com/zh-cn/library ...

  10. 打开QQ会话

    Android:String url="mqqwpa://im/chat?chat_type=wpa&uin=123456";startActivity(new Inten ...