我无法弄清楚为什么我的图表在上传到 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>