javascript Highcharts 不显示任何内容只是空白的 html 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15169646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts not displaying anything just blank html page
提问by R T
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>
回答by mgibsonbr
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 echocan 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_encodeshould take care of escaping everything, preventing XSS vulnerabilities).
这将起作用，因为您的数组在 JSON 编码时可以用来代替 JavaScript 文字（并且json_encode应该负责转义所有内容，防止 XSS 漏洞）。
回答by R T
The order of including javascripts should be:
包含 javascripts 的顺序应该是：
<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>
By this I mean, you have to include the jQuery library first before any other script.
我的意思是，您必须在任何其他脚本之前首先包含 jQuery 库。
