Question

有人可以帮助我。我是php和highcharts的新手。我尝试使用mysql和php填充我的图表，但是当我尝试运行它时，图表没有出现，我只是一个空白的网页。并且没有出现错误。

她是我的代码（对于凌乱的代码感到抱歉）：

<!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>
    <script src="../../js/highcharts.js"></script>
    <script src="../../js/modules/exporting.js"></script>

</head>

        <body>

    <?php
include "config.php";

$SQL1 =     "SELECT * FROM pos";

$result1 = mysql_query($SQL1);
$data1 = array();
while ($row = mysql_fetch_array($result1)) {
   $data1[] = $row['name'];
   $data2[] = $row['Qty'];

}
?>

<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>

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

</body>
    </html>

这是我的config.php

 <?php
 $mysql_hostname = "localhost";
 $mysql_user = "root";
 $mysql_password = "";
 $mysql_database = "pos";
 $prefix = "";
 $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not  connect database");
 mysql_select_db($mysql_database, $bd) or die("Could not select database");

  ?>

Answer 1

空白页通常表示语法错误。您应该开启error_reporting。

错误在于使用构造json的echo语句。错误是您在echo语句中缺少半冒号。

将<?php echo join($data1, ',') ?>替换为<?php echo join($data1, ','); ?>

同样适用于$data2：

将<?php echo join($data2, ',') ?>替换为<?php echo join($data2, ','); ?>

您可以在以下块中进行另一项改进：

    <?php
include "config.php";

$SQL1 =     "SELECT * FROM pos";

$result1 = mysql_query($SQL1);
$data1 = array();
while ($row = mysql_fetch_array($result1)) {
   $data1[] = $row['name'];
}

$result2 = mysql_query($SQL1);
$data2 = array();
while ($row = mysql_fetch_array($result2)) {
   $data2[] = $row['Qty'];
}
?>

不是执行两次查询来构建两个数组，而是可以摆脱其中一个查询并从同一查询结果中构建两个数组：

<?php
include "config.php";

$SQL1 =     "SELECT * FROM pos";

$result1 = mysql_query($SQL1);

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

while ($row = mysql_fetch_array($result1)) {
   $data1[] = $row['name'];
   $data2[] = $row['Qty'];
}
?>

注意： The php mysql extension is deprecated as of PHP 5.5.0, you should be using either MySQLi or PDO_MySQL.

Answer 2

我认为你应该围绕这个

单引号

categories: [<?php echo join($data1, ',') ?>],

应该是

categories: ['<?php echo join($data1, ',') ?>'],

Answer 3

请尝试以下示例。我认为它可以帮到你

SQL表

CREATE TABLE IF NOT EXISTS `sales` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `month` varchar(200) DEFAULT NULL,
  `amount` varchar(11) DEFAULT NULL,
  PRIMARY KEY (`id`)

) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=118 ;


INSERT INTO `sales` (`id`, `month`, `amount`) VALUES
(24, 'Apr', '15'),
(25, 'May', '40'),
(26, 'Jun', '26'),
(27, 'Jul', '31'),
(28, 'Aug', '39'),
(29, 'Sep', '25'),
(30, 'Oct', '27'),
(31, 'Nov', ' 32'),
(32, 'Dec', NULL);

这里我们创建新表并在其中插入一些数据。现在数据将如下所示

Mysql

<强>的index.php

<head>
    <meta name="Gopal Joshi" content="Highchart with Mysql" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Highchart with Mysql Database</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/setup.js"></script>
    <script type="text/javascript" src="js/test.js"></script>    
</head>

<body>
    <script src="js/highcharts.js"></script>
    <div id="sales" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>

<强> setup.js

var chart;
 $(document).ready(function() {
        var cursan = {
   chart: {
    renderTo: 'sales',
    defaultSeriesType: 'area',
    marginRight: 10,
    marginBottom: 20
   },
   title: {
    text: 'Highchart With Mysql',
   },
   subtitle: {
    text: 'www.spjoshis.blogspot.com',
   },
   xAxis: {
    categories: ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar']
   },
   yAxis: {
    title: {
     text: 'Average'
    },
    plotLines: [{
     value: 0,
     width: 1,
     color: '#808080'
    }]
   },
   tooltip: {
       crosshairs: true,
                shared: true
   },
   legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -10,
    y: 30,
    borderWidth: 0
   },

            plotOptions: {

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

         series: [{
       color: Highcharts.getOptions().colors[2],
    name: 'Test Colomn',
                marker: {
                    fillColor: '#FFFFFF',
                    lineWidth: 3,
                    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'
                    }
                }
   }],
        }

        //Fetch MySql Records
        jQuery.get('js/data.php', null, function(tsv) {
   var lines = [];
   traffic = [];
   try {
    // split the data return into lines and parse them
    tsv = tsv.split(/\n/g);
    jQuery.each(tsv, function(i, line) {
     line = line.split(/\t/);
     date = line[0] ;
                                        amo=parseFloat(line[1].replace(',', ''));
                                        if (isNaN(amo)) {
                                                   amo = null;
                                        }
     traffic.push([
      date,
      amo
     ]);
    });
   } catch (e) {  }
   cursan.series[0].data = traffic;
   chart = new Highcharts.Chart(cursan);
  });
 });

将从mysql导入来自data.php的数据并添加到先前在js中创建的图表中。

<强> data.php

$con=mysql_connect('localhost','root','');
mysql_select_db("test", $con);
$result=mysql_query('select * from sales order by id');
while($row = mysql_fetch_array($result)) {
  echo $row['month'] . "\t" . $row['amount']. "\n";
}

我们的图表已满载。使用mysql记录，输出将显示在下面

输出 output

区域图的示例，您可以通过更改defaultSeriesType来更改图表类型：＆＃39; area＆＃39;

Click Here了解更多带来源的示例。

Answer 4

即使这是一个旧线程，这可能与Highcharts无关，我只是在错误信息中注明了最后一句：

"...Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given
in C:\xampp\htdocs\otrs\chart\graphs\pos\index.php on line 22"

与查询无法返回FALSE而不是行集有关。你应该看看这个related question。

Php和MySQL与Highchart

4 个答案: