Highcharts未在HTML页面上显示

时间:2015-08-18 12:48:58

标签: javascript php html charts highcharts

我一直在使用Highcharts创建一些图表。除了一个网页外,我还能在网页上展示大部分内容。 (我不明白为什么)

我的php如下:

test.php

<html>
   <head></head>
<body>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
$ (function () {
        $.getJSON("data.php", function(json) {  


    var data_array = json;

    var series_array = [];
    //Starts with 1 and finishes with length - 1 to avoid first and last item
    for (var i = 1; i < data_array.length - 1; ++i) {
        series_array.push({
            name: data_array[i].name,
            data: data_array[i].data,
            type: 'column'
        });
    }

    series_array.push({
        name: data_array[data_array.length - 1].name,
        data: data_array[data_array.length - 1].data,
        type: 'line',
        yAxis: 1
    });

    $('#container').highcharts({
        chart: {            
            alignTicks: false
        },
        title: {
            text: 'TCH Drop'
        },
        xAxis: {
            categories: data_array[0]["data"]
        },
        yAxis: [{
            min: 0, 
            max: 100,
            title: {
                text: 'Percentage (%)'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        }, {
            min: 0,
            title: {
                text: ''
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            opposite: true
        }],
        legend: {
            enabled: true
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + ' %<br/>';
            }

        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            }
        },
        series: series_array
    }); 

    });

}); 
</script>

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

</body>
</html> 

然后我转到我的另一个php文件,在那里我显示我的html页面,我把它放在:

page.php文件

<?php 

$html=<<<HTML
...
...
...

<div id="container" class="6u  6u(xsmall)"> 
HTML;
include ('test.php');                               
$html.=<<<HTML
</div> 

...
...
HTML; 
echo $html; 
?> 

我知道这肯定不是最好的方法,但我对此非常陌生。 使用其他图表,它工作正常。但是对于这个,它没有显示任何东西。

有人知道它为什么不起作用吗?

提前谢谢你。

修改

这是我的JSON:

[{"name":"Period_start_time","data":["2015-08-03","2015-08-01","2015-08-02","2015-08-03","2015-08-04","2015-08-05","2015-08-07","2015-08-08","2015-08-09","2015-08-10"]},{"name":"dcr_34","data":[35.42,40.78,31.68,35.42,35.81,37.21,38.41,39.9,33.93,40.93]},{"name":"dcr_35","data":[53.75,47.06,55.78,53.75,51.63,55.15,48.01,48.99,51.34,46.51]},{"name":"dcr_36","data":[0,0.39,0,0,0.47,0,0.66,0.51,0,0]},{"name":"dcr_37","data":[0,0,0,0,0,0,0,0,0,0]},{"name":"dcr_38","data":[5,10.2,8.25,5,7.44,4.65,10.93,7.07,8.48,9.3]},{"name":"dcr_39","data":[0,0,0.33,0,0,0,0,0,0,0]},{"name":"dcr_40","data":[1.67,0,0.99,1.67,1.86,1.33,0.66,0.51,0.89,0.93]},{"name":"dcr_41","data":[0.83,1.57,0.66,0.83,2.79,1.66,1.32,2.53,2.23,0.47]},{"name":"dcr_42","data":[0,0,2.31,0,0,0,0,0.51,3.13,0]},{"name":"dcr_43","data":[0,0,0,0,0,0,0,0,0,0]},{"name":"dcr_44","data":[3.33,0,0,3.33,0,0,0,0,0,1.86]},{"name":"dcr_45","data":[0,0,0,0,0,0,0,0,0,0]},{"name":"dcr_46","data":[0,0,0,0,0,0,0,0,0,0]},{"name":"dcr_47","data":[0,0,0,0,0,0,0,0,0,0]},{"name":"dcr_4g","data":[3.97,3.83,3.78,3.97,3.16,4.31,4.39,3.2,3.14,3.67]}]

0 个答案:

没有答案