Question

我试图使用php和highcharts api打印存储在我的数据库中的结果。但是图形没有显示在屏幕上。甚至轴都没有显示。数据来自mysql数据库。我尝试使用相同的代码在highcharts演示但没有运气。
继承我的代码

<?php
require_once ('connection.php');
session_start();
$username =  $_SESSION['username'];
$quizes=null;
$score=array();
$i=0;

$result = mysql_query("SELECT * FROM `score` WHERE `username`='$username'") or die(mysql_error);
while($rows=mysql_fetch_array($result)) {
$quizes= $quizes. "'".$rows['quiz']."',";
$score[$i]=$rows['score'];
$i=$i+1;
}
print_r($score);
echo $quizes;
?>
<html>
<body>
<script src="js/jquery.js"></script>
<script src="highcharts/js/highcharts.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//passing php variables to javascript variables
   //eg  var mk1=<?php echo $mark1 ?>;
 var mk1=<?php echo $score[1] ?>;
 var mk2=<?php echo $score[2] ?>;
 var mk3=<?php echo $score[3] ?>;
 var mk4=<?php echo $score[4] ?>;
 var mk5=<?php echo $score[5] ?>;
 var mk6=<?php echo $score[6] ?>;
 var mk7=<?php echo $score[7] ?>;
 var mk8=<?php echo $score[8] ?>;    
  var chart1 = new Highcharts.Chart({
    chart: {
       renderTo: 'graphDiv',
       defaultSeriesType: 'column'
    },
     title: {
       text: 'SEMESTER'
    },
    xAxis: {
      categories: ['QUIZ A', 'QUIZ B',  'QUIZ C', 'QUIZ D', 'QUIZ E', 'QUIZ F','QUIZ G','QUIZ  H']
    },
    yAxis: {
       title: {
          text: 'Percentage'
      }
    },
    series: [{
       name: ['Quiz Progress'],
       data: [mk1, mk2, mk3, mk4, mk5, mk6, mk7, mk8]
    },]
   });
 });
 </script>
 <div id="graphDiv" style="width: 700px; height: 400px; float: left"></div>
  </body>
  </html>

Answer 1

以下是从高图中的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); }); });

这里js将使用data.php文件从mysql导入数据并将其提供给我们的图表

<强> 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"; }

data.php只会打印我们将用于图表的页面上的值。您可以将此方法与同一页面上的多个图表一起使用，并且不再需要更多单个图表文件。

输出类似于

Click Here获取更多帮助或下载示例。

Answer 2

我认为您以字符串格式获取数据。像这样将数据转换为整数，

var mk1=<?php echo $score[1] ?>;

to integer: +mk1 // and check typeof +mk1

以下是演示http://jsfiddle.net/XF293/

Answer 3

我建议考虑在php中使用json_encode（）并将所有值作为单个数组返回。然后使用$ .getJSON（）来避免打印值出现问题。结果您的数据如何？我的意思是在javascript。

highcharts不显示图形

3 个答案: