直接上代码

【官方文档请参见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. xmpp openfire smack 介绍和openfire安装及使用

    前言 Java领域的即时通信的解决方案可以考虑openfire+spark+smack.当然也有其他的选择. Openfire是基于Jabber协议(XMPP)实现的即时通信服务器端版本,目前建议使用 ...

  2. MySql常用日期函数(转载)

    /*date_add(date,interval expr type)和date_sub(date,interval expr type)执行日期运算. date 是一个 datetime 或date ...

  3. async 和 await 的进阶

    异常的捕获: static void Main(string[] args) { //继续我们的异步编程的使用嘀呀: //关于主线程是无法捕获我们子线程中的异常滴滴啊: var t = DoExcep ...

  4. 恢复 混淆后的 stacktrace 文件

    ./tools/proguard/bin/retrace.sh /Users/admin/Downloads/ProguardSample/app/build/outputs/mapping/rele ...

  5. asp.net 自带的缓存

    本文导读:在.NET运用中经常用到缓存(Cache)对象.有HttpContext.Current.Cache以及HttpRuntime.Cache,HttpRuntime.Cache是应用程序级别的 ...

  6. Python程序的首行

    >问题 >>在一些python程序中的首行往往能够看见下面这两行语句中的一句 >>>#!/usr/bin/Python >>>#!/usr/bin ...

  7. PHP数组内容不重复组合排列算法

    最近在做ecshop的商品库存模块,分别给一款商品的多个属性组合设置库存,如下图: 一款手机有不同颜色,屏幕尺寸,系统和电量,都要设置不同的库存,如果都要手动选择属性组合,则会耗费很多不必要的时间.假 ...

  8. List转换成XML

    protected void Button1_Click(object sender, EventArgs e) { var customerlist = CustomerHelper.GetList ...

  9. Jquery 定时器 倒计时

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  10. STL—Vector简介

    有关C++ STL 中的vector向量的用法(代码示例) 一. 简介 Vector是一个称为向量的顺序容器(不明白顺序容器与关联容器的可以Google). 二. 特点 1. 动态(相当于一个动态数组 ...