我不明白为什么当我将其上传到 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 documentation声明它依赖于 jQuery、MooTools 或 Prototype。这可能在 jsfiddle 中有效，因为它默认将 jQuery 加载到浏览器中。
其次，您应该将所有图表创建放在 $(document).ready(function () {}) block 内。该区 block 中仅初始化了您的收入图表。
查看稍作修改的独立工作版本 http://static.nickfishman.com/misc/12737085.html
关于javascript - 为什么我的 3 个 Highcharts 饼图/图表中只显示了 2 个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12737085/