Question

Highcharts / PHP / JS新手在这里。我无法格式化所需的数据数组（$ data）以输入Highcharts。嵌入式php代码输出格式

的日期时间/十进制数据数组

[1388680500000, 11215], [1388680800000, 11334], [1388681100000, 11487], [1388681400000, 11600], [1388681700000, 11641], [1388682000000, 11648], [1388682300000, 11692], [1388682600000, 11641], [1388682900000, 11715], [1388683200000, 11808], [1388683500000, 11845], [1388683800000, 11813], [1388684100000, 11771], [1388684400000, 11746], [1388684700000, 11808], [1388685000000, 11784], [1388685300000, 11727], [1388685600000, 11608], [1388685900000, 11648], [1388686200000, 11587], [1388686500000, 11555], [1388686800000, 11596], [1388687100000, 11541], [1388687400000, 11441], [1388687700000, 11393], [1388688000000, 11340], [1388688300000, 11152], [1388688600000, 11031], [1388688900000, 10920], [1388689200000, 10681], [1388689500000, 10221], [1388689800000, 9895]

我目前正手动将这些数据（在[]中）复制到成功生成图表的系列：data：字段中（见下文）。我试图用数据字段替换系列：[{ 数据：[] 但是不再创建图表。（根据http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-database）

我还在php和JS中尝试过json_encode（$ data）的多次迭代，但无济于事。我非常感谢能够向我展示PHP输出到Highcharts数据字段的确切翻译的人，最好是使用JSON。

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

    <?php
        //the usual stuff 
        error_reporting(-1);

         $con = mysql_connect("localhost","root","");

        if (!$con) {
          die('Could not connect: ' . mysql_error());
        }

        mysql_select_db("test", $con);

        $result = mysql_query("SELECT unix_timestamp(DATETIMES), TEST FROM PT");

        $data = array();

        while ($row = mysql_fetch_array($result)) {  
        extract($row);
        $row[0]=1000*$row[0];
        $data[] = "[$row[0], $row[1]]";
        }

        mysql_close($con);
        echo join($data, ', ');
    ?>



<script>
$(function() {
    Highcharts.setOptions({
        chart: {
            backgroundColor: 'rgba(255, 255, 255, .9)',
            borderWidth: 2,
            plotBackgroundColor: 'rgba(255, 255, 255, .9)',
            plotShadow: true,
            plotBorderWidth: 1
        }
    });

    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
        },

        xAxis: {
            type: 'datetime'
        },

        series: [{
            data: [[1388680500000, 11215], [1388680800000, 11334], [1388681100000, 11487], [1388681400000, 11600], [1388681700000, 11641], [1388682000000, 11648], [1388682300000, 11692], [1388682600000, 11641], [1388682900000, 11715], [1388683200000, 11808], [1388683500000, 11845], [1388683800000, 11813], [1388684100000, 11771], [1388684400000, 11746], [1388684700000, 11808], [1388685000000, 11784], [1388685300000, 11727], [1388685600000, 11608], [1388685900000, 11648], [1388686200000, 11587], [1388686500000, 11555], [1388686800000, 11596], [1388687100000, 11541], [1388687400000, 11441], [1388687700000, 11393], [1388688000000, 11340], [1388688300000, 11152], [1388688600000, 11031], [1388688900000, 10920], [1388689200000, 10681], [1388689500000, 10221], [1388689800000, 9895]],
            pointStart: 0,
            pointInterval: 3600 * 1000 // one hour
        }]
    });
});
</script>

</head>
<body>

<div id="container" style="height: 300px"></div>

</body>
</html>

编辑：

我已经将脚本重新调整为以下格式，但是图表根本不再绘制...我确信JSON格式是正确的。请帮忙！

<!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">
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: 'test',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: []
                },
                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: []
            }

            $.getJSON("data.php", function(json) {
                options.xAxis.categories = json['category'];
                options.series[0].name = json['name'];
                options.series[0].data = json['data'];
                chart = new Highcharts.Chart(options);
            });
        });
        </script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
    </head>
    <body>
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

Answer 1

尝试使用以下代码从MYSQL获取记录并将其转换为高级数据。

<强> setup.js

    var chart;
    $(document).ready(function() {
        var cursan = {
            chart: {
                renderTo: 'current_sanand',
                defaultSeriesType: 'area',
                marginRight: 10,
                marginBottom: 20
            },
            title: {
                text: '',
            },
            subtitle: {
                text: '2013/14',
            },
            xAxis: {
                categories: ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar']
            },
            yAxis: {
                title: {
                    text: 'Amount [Billion]'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                crosshairs: true,
                shared: true
            },
            legend: {
                layout: 'vertical',
                backgroundColor: 'white',
                align: 'right',
                verticalAlign: 'top',
                y: 35,
                x: -10,
                borderWidth: 1,
                borderRadius: 0,
                title: {
                    text: '::::::::::::'
                },
                floating: true,
                draggable: true,
                zIndex: 20

            },

            plotOptions: {

                series: {
                    cursor: 'pointer',  
                    marker: {
                        lineWidth: 1
                    }
                }
            },

            series: [{
                color: Highcharts.getOptions().colors[2],
                name: 'Sanand',
                marker: {
                    fillColor: '#FFFFFF',
                    lineWidth: 2,
                    lineColor: null // inherit from series
                },
                dataLabels: {
                    enabled: true,
                    rotation: 0,
                    color: '#666666',
                    align: 'top',
                    x: -10,
                    y: -10,
                    style: {
                        fontSize: '9px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 0px black'
                    }
                }
            }],

      }


     $.getJSON("data.php", function(json){
            options.xAxis.categories = json['category'];
            options.series[0].name = json['name'];
            options.series[0].data = json['data'];
            chart = new Highcharts.Chart(options);
     });

});

<强> data.php

$ con = mysql_connect（＆＃34; localhost＆＃34;，＆＃34; root＆＃34;，＆＃34;＆＃34;）;

    if (!$con) {
      die('Could not connect: ' . mysql_error());
    }

    mysql_select_db("test", $con);
    $sql = mysql_query("SELECT unix_timestamp(DATETIMES), TEST FROM PT");
    $result['name'] = 'Sales Summary';
    while($r = mysql_fetch_array($sql)) {
    $datetime = $r['inv_dt'];
    $result['category'][] = $datetime;
    $result['data'][] = round($r['amount'],2) ;
}
print json_encode($result);

<强>的index.php

 <html>
    <body>
       <div id="container" style="height: 300px"></div>
    </body>
 </html>

我尽力而为，这种方法运作正常。试试吧。

Highcharts PHP JSON - 正确的数据格式

1 个答案: