，请访问 http://static.nickfishman.com/misc/12737085.html
我不知道为什么我的图表在上传到jfiddle时显示得很好，但是，在我的实际页面中，3个图表中只有2个显示。
我错过了什么吗？我所有的javascript代码和标签都是关闭的。根本想不通这个。 你可以在这个jsfiddle看到我的代码：http://jsfiddle.net/kZcRX/
这是我的整个 HTML 页面...我不明白为什么我的图表不会显示，但在 JSFiddle 中显示得很好：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Graphs & Charts</title>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
// JavaScript Document
$(function () {
Highcharts.setOptions({
colors: ['#6eb5ec', '#d64646', '#8bba00', '#f6bd0f', '#cd5ace', '#f19153', '#cccccc', '#cd8b49']
});
var chart;
// Build the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
events: {
load: function(event) {
console.log(this);
}
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
floating: true,
x: 365,
y: 260,
itemStyle: {
color: '#000000',
fontWeight: 'normal',
fontSize: '11px'
}
},
title: {
text: '2012 Revenue Report'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true
},
showInLegend: true,
point: {
events: {
legendItemClick: function () {
return false; // <== returning false will cancel the default action
}
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Govt<br/>Contracts<br/>& Grants', 45.0],
['Private<br/>Grants/Gifts', 26.8],
{
name: 'Net Tuition<br/>& Fees',
y: 12.8,
sliced: true,
selected: true
},
['Auxiliary<br/>Enterprises', 8.5],
['Investments', 6.2],
['Dental Clinic', 0.7],
['Other', 0.7]
]
}]
});
});
// ENDOWMENT BAR GRAPH
chart = new Highcharts.Chart({
chart: {
renderTo: 'endowment',
type: 'column',
events: {
load: function(event) {
console.log(this);
}
}
},
title: {
text: '2012 Financial Endowment Report'
},
subtitle: {
text: 'Periods ending June 30th'
},
xAxis: {
categories: [
'Reporting Year'
]
},
yAxis: {
min: 0,
title: {
text: 'Millions (mm)'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 85,
y: 50,
floating: true,
shadow: true
},
showInLegend: true,
point: {
events: {
legendItemClick: function () {
return false; // <== returning false will cancel the default action
}
}
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true
},
showInLegend: true,
point: {
events: {
legendItemClick: function () {
return false; // <== returning false will cancel the default action
}
}
}
}
},
series: [{
name: 'Yr 2011',
data: [49.9]
}, {
name: 'Yr 2012',
data: [83.6]
}]
});
// EXPENSES CHART
chart = new Highcharts.Chart({
chart: {
renderTo: 'expenses',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'This will be a pie chart',
style: {
Color: '#666'
}
},
tooltip: {
formatter: function() {
return '<strong>'+ this.point.name +'</strong>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true
},
showInLegend: true
}
},
showInLegend: true,
point: {
events: {
legendItemClick: function () {
return false; // <== returning false will cancel the default action
}
}
},
series: [{
type: 'pie',
name: 'Our Current Expenses',
data: [
['Expense1', 26.9],
['Expense2', 27.7],
['Expense3', 45.3],
{
name: 'Other',
y: 32.2,
sliced: true,
selected: true
}
]
}],
legend: {
borderColor: '#666'
}
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="expenses" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="endowment" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
我看到了各种各样的问题。首先，尝试在所有其他脚本之前包含 jQuery。Highcharts文档指出它依赖于jQuery，MooTools或Prototype。这可能适用于 jsfiddle，因为它默认将 jQuery 加载到浏览器中。
其次，您应该将所有图表创建放在 $（document）.ready（function （） {}） 块中。在该块中，只有您的收入图表被初始化。
看看一个略有修改的、工作的独立版本
我不确定为什么你需要这个
$(document).ready(function () {
在你的JavaScript中。我可以看到您已经在准备好的文档上初始化事件，所以这是多余的，可能会导致您面临的问题。尝试没有它。
这样就 http://jsfiddle.net/kZcRX/1/