我使用我自己的数据库和他们的代码,但即便有例子也没有在我的页面上绘制图表。
data.php:
<?php
#Include the connect.php file
include('connect.php');
#Connect to the database
//connection String
$connect = mysql_connect($hostname, $username, $password)
or die('Could not connect: ' . mysql_error());
//Select The database
$bool = mysql_select_db($database, $connect);
if ($bool === False){
print "can't find $database";
}
$query = "SELECT * FROM `invoices` ORDER BY OrderDate LIMIT 0 , 100";
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
// get data and store in a json array
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$orders[] = array(
'OrderDate' => $row['OrderDate'],
'ProductName' => $row['ProductName'],
'Quantity' => $row['Quantity']
);
}
echo json_encode($orders);
?>
的test.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chart</title>
<link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jqxcore.js"></script>
<script type="text/javascript" src="jqxchart.js"></script>
<script type="text/javascript" src="jqxdata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var source =
{
datatype: "json",
datafields: [
{ name: 'OrderDate', type: 'date'},
{ name: 'Quantity'},
{ name: 'ProductName'}
],
url: 'data.php'
};
var dataAdapter = new $.jqx.dataAdapter(source,
{
autoBind: true,
async: false,
downloadComplete: function () { },
loadComplete: function () { },
loadError: function () { }
});
// prepare jqxChart settings
var settings = {
title: "Orders by Date",
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
text: 'Category Axis',
textRotationAngle: 0,
dataField: 'OrderDate',
formatFunction: function (value) {
return $.jqx.dataFormat.formatdate(value, 'dd/MM/yyyy');
},
showTickMarks: true,
tickMarksInterval: Math.round(dataAdapter.records.length / 6),
tickMarksColor: '#888888',
unitInterval: Math.round(dataAdapter.records.length / 6),
showGridLines: true,
gridLinesInterval: Math.round(dataAdapter.records.length / 3),
gridLinesColor: '#888888',
axisSize: 'auto'
},
colorScheme: 'scheme05',
seriesGroups:
[
{
type: 'line',
valueAxis:
{
displayValueAxis: true,
description: 'Quantity',
//descriptionClass: 'css-class-name',
axisSize: 'auto',
tickMarksColor: '#888888',
unitInterval: 20,
minValue: 0,
maxValue: 100
},
series: [
{ dataField: 'Quantity', displayText: 'Quantity' }
]
}
]
};
// setup the chart
$('#jqxChart').jqxChart(settings);
});
</script>
</script>
</head>
<body>
<div id="jqxChart"></div>
</body>
</html>
data.php正确输出数据,但图表没有出现在test.html上。即使我在Web Developer生成的源代码中看到了其他语法代码:
<div id="jqxChart">
<table id="tblChart" valign="top" align="left" border="0" cellpadding="0" cellspacing="0"><tbody>
<tr>
<td style="height: 0.5px;" colspan="2" id="tdTop">
</td>
</tr>
<tr>
<td id="tdLeft">
</td>
<td style="width: 1264px; height: 0px;" class="chartContainer">
<svg height="100%" width="100%" version="1.1" id="svgChart">
<defs>
<clipPath id="cl1371557944881_1">
<rect height="0" width="1263" y="1" x="1">
</rect>
</clipPath>
<clipPath id="cl1371557944881_2">
<rect height="19" width="1165" y="4" x="94">
</rect>
</clipPath>
<clipPath id="cl1371557944881_3">
<rect height="16" width="1165" y="21" x="94">
</rect>
</clipPath>
</defs>
<rect stroke="#888888" stroke-width="1" fill="#FFFFFF" height="-1" width="1262" y="1.5" x="1.5">
</rect>
<g clip-path="url(#cl1371557944881_1)">
<g clip-path="url(#cl1371557944881_2)">
<text cursor="default" height="17" width="1163" y="19" x="616" class="jqx-chart-title-text">Orders by Date</text></g>
<g clip-path="url(#cl1371557944881_3)">
<text cursor="default" height="14" width="1163" y="34" x="640" class="jqx-chart-title-description">Description</text>
</g>
</g>
</svg>
</td>
</tr>
</tbody>
</table>
</div>
我不明白问题出在哪里。尝试使用旧版本的jquery,但问题是相同的,也检查过FireBug Net,所有javascript文件都加载了代码200.
答案 0 :(得分:0)
图表的大小未设置,应该是问题所在。您可以设置其宽度和高度CSS属性。