0

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-data-source.htm

我使用我自己的数据库和他们的代码，但即使有例子也没有在我的页面上绘制图表。

数据.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);
?>

测试.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。

4

1 回答 1

0

图表的大小未设置，这应该是问题所在。你可以设置它的 Width 和 Height CSS 属性。

于 2013-06-18T12:55:58.083 回答