海图没有显示任何东西，只是空白的html页面

I tried to use the example given in highcharts website. But when i use it all i am getting is a blank html page. Someone please help me with the code. I do not understand why the code is not loading properly please tell me if i should add something extra to this, and please do let me know how to use a php array to make this graph work also

我试着用在highcharts网站上的例子。但是当我使用它时，我得到的只是一个空白的html页面。谁来帮我弄一下密码。我不明白为什么代码没有正确地加载，请告诉我是否应该添加一些额外的内容，请务必让我知道如何使用php数组来让这个图也工作

<html>
<head>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"       type="text/javascript"></script> 
<script>
$(function () {
  var chart;
  $(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});

});
</script>
</head>
<body>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
 </body>
</html>

2 个解决方案

#1

I believe your problem is in the order you included the scripts. Try placing jQuery first:

我相信你的问题在于你把剧本包括进去了。先试着把jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"       type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

Demo (working / not working).

演示(工作/不工作)。

Update: to load your data from MySQL using PHP, please see this example. However, as you pointed out yourself, encoding it using JSON might be a better option:

更新:要使用PHP从MySQL加载数据，请参见这个示例。但是，正如您自己指出的，使用JSON编码可能是更好的选择:

$data = array();

while($row = mysql_fetch_array($results)) {
    $data[] = array($row[1], $row[0]);
}
echo json_encode($data);

This last echo can be used either to return the whole array using ajax (like the linked example above), or when generating the page itself (i.e. "hardcoding" it in the script):

最后一个echo可以使用ajax返回整个数组(如上面的链接示例)，或者在生成页面本身时(也就是)。“硬编码”):

    series: [{
        type: 'pie',
        name: 'Browser share',
        data: <?php echo json_encode($data)?> 
    }]

This will work since your array, when JSON encoded, can be used in place of a JavaScript literal (and the json_encode should take care of escaping everything, preventing XSS vulnerabilities).

这将起作用，因为当JSON编码时，可以使用数组来代替JavaScript文本(json_encode应该负责转义所有内容，防止XSS漏洞)。

2 个解决方案

#1

更多相关文章

随机推荐