JQChart不可見

Question

我正在使用jquery小部件顯示文件的折線圖。 為此，我有3個文件connect.php，其中我只有用戶名和密碼以及dbhost名稱，其余兩個文件都在這里，我正在使用此代碼作為data.php

<?php
include 'conn.php';

$conn = oci_connect($dbuser, $dbpass, $dbhost) or die('Error connecting to mysql');

$query   = "SELECT  PRODUCT, sum(QUANTITY) as QUANTITY FROM  SALES GROUP  BY PRODUCT";
$resultb = oci_parse($conn, $query);
oci_execute($resultb);

$orders = array();

$i = 0;
while (($row = oci_fetch_array($resultb, OCI_NUM)) != false) {
    $orders[] = array(
        'ProductName' => $row[0],
        'Quantity' => $row[1]
    );
}   

$_SESSION['orders'] = $orders;
echo json_encode($orders);

?>

這是我要運行的文件代碼

<html lang="en">
<head>
    <title id='Description'>jQuery Chart Column Series Example</title>
    <link rel="stylesheet" href="dw/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="dw/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="dw/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="dw/jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="dw/jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="dw/jqwidgets/jqxdata.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            var source = {
                datatype: "json",
                datafields: [{
                    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 Product",
                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: 'ProductName',
                    showTickMarks: true,
                    tickMarksInterval: Math.round(dataAdapter.records.length / 15),
                    tickMarksColor: '#888888',
                    unitInterval: Math.round(dataAdapter.records.length / 15),
                    showGridLines: true,
                    gridLinesInterval: Math.round(dataAdapter.records.length / 15),
                    gridLinesColor: '#888888',
                    axisSize: 'auto'
                },
                colorScheme: 'scheme05',
                seriesGroups: [{
                    type: 'line',
                    valueAxis: {
                        displayValueAxis: true,
                        description: 'Quantity',
                        //descriptionClass: 'css-class-name',
                        axisSize: 'auto',
                        tickMarksColor: '#888888',
                        unitInterval: 100,
                        minValue: 0,
                        maxValue: 500
                    },
                    series: [{
                        dataField: 'Quantity',
                        displayText: 'Product'
                    }]
                }]
            };

            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>

</head>

<body style="background:white;">
    <div id='jqxChart' style="width:400px; height: 300px" />
</body>

</html>

它像這樣顯示

這樣顯示

雖然我的data.php工作正常

Answer 1

從data.php文件中刪除“ Hello World”，由於它，您的圖表無法正確讀取數組

JQChart不可見

問題描述

1 個解決方案

解決方案1
0 2015-11-27 19:58:17

JQChart不可見

問題描述

1 個解決方案

解決方案1 0 2015-11-27 19:58:17

解決方案1
0 2015-11-27 19:58:17