Highcharts在本地显示条形图(localhost)但不在线(web主机)

时间:2017-01-18 09:12:07

标签: javascript php mysql highcharts

我使用Highchart js使用PHP在MySQL数据库中显示条形图。 在编码时, 在我的计算机上完美地运行 。但是当我在线托管文件时却没有。

数据库连接:     

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql3 = 'SELECT SUM(CASE WHEN jk="0" THEN 1 ELSE 0 END) as jumlahwanita, SUM(CASE WHEN jk="1" THEN 1 ELSE 0 END) as jumlahlaki, star as star'
        . ' FROM pstrating'
        . ' GROUP BY star'
        . ' ORDER BY star ASC';

$hasil3 = $conn->query($sql3);
?>

分配数组:

<?php
$label = array();
$nilailaki = array();
$nilaiwanita = array();
foreach ($hasil3 as $i => $ii) {
    $label[$i] = array($ii['star']);
    $nilaiwanita[$i] = (int) $ii['jumlahwanita'];
    $nilailaki[$i] = (int) $ii['jumlahlaki'];
}
?>

使用javascript(<body>标记内)显示数据:

<script type="text/javascript">
    $(function () {
        // Create the chart
        Highcharts.chart('dataProvider', {
            chart: {
                type: 'column',
                /*backgroundColor: '#E8FFD1',*/
                style: {
                    fontFamily: '"Open Sans", Helvetica, sans-serif', // default font
                    fontSize: '1em'
                },
            },
            title: {
                text: 'PRESTASI LAYANAN PST'
            },
            subtitle: {
                text: 'Berdasarkan Penilaian Pengguna (Range nilai 0-5)'
            },
            xAxis: {
                categories:
                        [<?php
                                                $arrlength = count($label);
                                                for ($x = 0; $x < $arrlength; $x++) {
                                                    echo '"' . $label[$x][0] . '"' . ", ";
                                                }
                                                ?>],
                title: {
                    text: 'Rating'
                },
            },
            yAxis: {
                title: {
                    text: 'JUMLAH RATING',
                    align: 'middle'
                }

            },
            legend: {
                enabled: true
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                column: {
                    dataLabels: {
                        enabled: false,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            textShadow: '0 0 3px black'
                        }
                    },
                },
                series: {
                    cursor: 'pointer',
                    dataGrouping: {
                        enabled: false
                    }
                },
            },
            tooltip: {
                headerFormat: '<table>' +
                        '<b><i>Rating: {point.key}</span></i></b>'
                ,
                pointFormat: '<tr>' +
                        '<td style="color:{series.color};font-weight:bold">{series.name}: </td>' +
                        '<td> : </td>' +
                        '<td style="font-weight:bold">{point.y} kali</td>' +
                        '</tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            series: [
                {
                    name: 'Perempuan',
                    data: [<?php echo $nilaiwanita[0] . ',' . $nilaiwanita[1]; ?>],
                    color: '#E78DF9'
                },
                {
                    name: 'Laki-laki',
                    data: [<?php echo join($nilailaki, ',') ?>],
                    color: '#438EFA'
                }
            ],
        });
    });

</script>

我尝试使用series更改[1,2,3,6,1]属性,然后显示数据。但使用此data: [<?php echo join($nilailaki, ',') ?>],或此[<?php echo $nilaiwanita[0] . ',' . $nilaiwanita[1]; ?>],并未显示任何内容。

我也尝试在我的网络主机上访问js文件,它显示得很好。 我不明白这里什么不起作用。

网络主机上的图表显示: Display on Web Host

我的本地计算机上的图表显示: Display on Local

0 个答案:

没有答案