首頁 > 開發者 > MySQL

highcharts php請求mysql返回json資料作為資料來源進行製圖

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：line   highchart   team   user   dem   nes   check   googl   sel   

　　直接上代碼

【官方文檔請參見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 classrequire_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 resultif (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資料作為資料來源進行製圖

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More