使用php,mysql和jquery的Highchart

时间:2014-08-11 08:52:18

标签: php jquery mysql highcharts

有人可以帮我这个吗?我正在尝试创建高级图表。我尝试使用mysql和php填充我的图表,但是当我尝试运行它时,会出现图表x轴值,但不会出现y轴值,。任何人都可以为这些问题提供任何解决方案吗?

我的代码在下面给出

<?php
    error_reporting(0);
    $con = @mysql_connect("localhost","root","");

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

    mysql_select_db("bfsdemo", $con);

    $SQL1 =     "SELECT * FROM highcharts_php";

    $result1 = mysql_query($SQL1);

    $data1 = array();
    $data2 = array();

    while ($row = mysql_fetch_array($result1)) {
        $data2[] = $row['visits'];
        $data1[] = $row['timespan'];
    }
    ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
</head>

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

</body>

</html>
<script type="text/javascript">
    $(function () {
        $('#container').highcharts({
            chart: {
                type: 'column',
                margin: [50, 50, 100, 80]
            },
            title: {
                text: 'List of POS'
            },
            credits: {
                enabled: false
            },
            xAxis: {
                categories: ['<?php echo join("', '",$data1); ?>'],
                labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'No. of Ticket'
                }
            },
            legend: {
                enabled: false,
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 50,
                y: 35,
                floating: true,
                shadow: true
            },
            tooltip: {
                pointFormat: '<b>{point.y:.1f} tickets</b>',
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Qty',
                data: ['<?php echo join("', '", $data2); ?>'],
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    x: 4,
                    y: 10,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 3px black',

                    }
                }
            }]
        });
    });

</script>

1 个答案:

答案 0 :(得分:0)

使用json_encode传递php数组到javascript

data: ['<?php echo json_encode($data2); ?>'],