如何使用php,mysql和jquery创建Highchart

时间:2014-08-12 04:44:13

标签: 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'];
    }
   >


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org  /TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <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)

删除引号

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