0

有人用过 hightchart 吗？我想用 hightchart 来表示从 mysql 数据库中检索的数据。我试着看看这个例子，这是完整的例子： 

    <script type="text/javascript">
     $(function() {
var seriesOptions = [],
    yAxisOptions = [],
    seriesCounter = 0,
    names = ['MSFT', 'AAPL', 'GOOG'],
    colors = Highcharts.getOptions().colors;

$.each(names, function(i, name) {

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?',   function(data) {


        seriesOptions[i] = {
            name: name,
            data: data
        };

        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        seriesCounter++;

        if (seriesCounter == names.length) {
            createChart();
        }
    });
});



// create the chart when all data is loaded
function createChart() {

    chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },

        rangeSelector: {
            selected: 4
        },

        yAxis: {
            labels: {
                formatter: function() {
                    return (this.value > 0 ? '+' : '') + this.value + '%';
                }
            },
            plotLines: [{
                value: 0,
                width: 2,
                color: 'silver'
            }]
        },

        plotOptions: {
            series: {
                compare: 'percent'
            }
        },

        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
            valueDecimals: 2
        },

        series: seriesOptions
    });
}

    });
    </script>

问题是他们使用此链接（“http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?”）来获取数据以及我无法查看它们如何显示数据的示例.. 我不知道链接“http://www.highcharts.com/samples/data/jsonp.php”的样子，以及它们如何代表数据..我想制作我自己的页面，从数据库中检索数据并用我自己的 php 页面替换上面的链接..这是工作示例...http://www.highcharts.com/stock/demo/compare

4

3 回答 3

0

解决了------------下面的索引文件

        <!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.7.1/jquery.min.js"></script>
                <script type="text/javascript">
        $(function () {
            var chart;
            $(document).ready(function() {
                $.getJSON("map2.php", function(json) {
                chart = new Highcharts.Chart({
                        chart: {
                            renderTo: 'container',
                            type: 'line',
                            marginRight: 130,
                            marginBottom: 25
                        },
                        title: {
                            text: 'Revenue vs. Overhead',
                            x: -20 //center
                        },
                        subtitle: {
                            text: '',
                            x: -20
                        },

                        yAxis: {
                            title: {
                                text: 'Amount'
                            },
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                        },

                        tooltip: {
                            formatter: function() {
                                    return '<b>'+ this.series.name +'</b><br/>'+
                                    this.x +': '+ this.y;
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'top',
                            x: -10,
                            y: 100,
                            borderWidth: 0
                        },
                        series: json
                    });

                });

            });

        });
                </script>
            </head>
            <body>
          <script src="http://code.highcharts.com/highcharts.js"></script>
          <script src="http://code.highcharts.com/modules/exporting.js"></script>

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

            </body>
        </html>

下面的ajax文件

    <?php
    $con = mysql_connect("localhost","username","password");
    if (!$con) {
    die('Could not connect: ' . mysql_error());
    }mysql_select_db("cakephp", $con);
    $sth = mysql_query("SELECT revenue FROM highcharts2");
    $rows = array();
    $rows['name'] = 'revenue';
    while($r = mysql_fetch_array($sth)) {
     $rows['data'][] = $r['revenue'];
    }
    $sth = mysql_query("SELECT overhead FROM highcharts2");
    $rows1 = array();
    $rows1['name'] = 'overhead';
    while($rr = mysql_fetch_assoc($sth)) {
    $rows1['data'][] = $rr['overhead'];
    }$result = array();
    array_push($result,$rows);
    array_push($result,$rows1);
    print json_encode($result, JSON_NUMERIC_CHECK);
    mysql_close($con);
    ?>

创建数据库如下

CREATE TABLE IF NOT EXISTS `highcharts2` (
  `id` int(10) NOT NULL auto_increment,
  `month` varchar(225) NOT NULL,
  `revenue` varchar(225) NOT NULL,
  `overhead` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
)
INSERT INTO `highcharts2` (`id`, `month`, `revenue`, `overhead`) VALUES
(1, 'jan', '23987', '21990'),
(2, 'Feb', '24784', '22363'),
(3, 'Mar', '25899', '21987'),
(4, 'Apr', '25569', '22369'),
(5, 'May', '25599', '22698'),
(6, 'jun', '25577', '21999'),
(7, 'Jul', '24111', '2599'),
(8, 'Aug', '25555', '21988'),
(9, 'sep', '25444', '21981'),
(10, 'oct', '25599', '21988'),
(11, 'nov', '24559', '20142'),
(12, 'dec', '25111', '22222');
于 2014-08-06T17:05:55.323 回答
0

您必须创建要填充的数据数组。然后使用json_encode将 php 数组编码为 json 格式。回显该 json 字符串。
这是一个示例代码 

$a[] = 1133740800000;
$a[] = 1133740800000;
$a[] = 1133740800000;
$a[] = 1133740800000;
$a[] = 1133740800000;
$b[] = 405.85;
$b[] = 405.85;
$b[] = 405.85;
$b[] = 405.85;
$b[] = 405.85;

foreach($a as $i => $v)
{
    $cordinates[]= array($v,$b[$i]); 
}

echo (json_encode($cordinates));

希望这可以帮助。

于 2012-12-03T10:34:18.793 回答
0

使用firebug，可以查看ajax的响应，应该是json对象

于 2012-12-03T10:07:25.047 回答