高图表没有填充

时间:2015-05-21 10:16:53

标签: jquery html highcharts

我是高中新手,我开始学习,我试图在html中显示简单的饼图,但它不起作用。一切看起来都不错,我不知道出了什么问题。 highchart没有填充。

jsfiddle link



<!DOCKTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Final</title>
		<!--Bootstrap source start-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<!--Bootstrap source end-->
		
		<!--highchart source start-->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script src="C:\Users\Global Soft\Desktop\HighChart\js\highcharts.js" type="text/javascript"></script>
		<script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
		<!--highchart source end--> 
		
		
		<!--Charts starts here-->
		<script type="text/javascript">
		$(function (){
			var charti;
			$(document).ready(function(){
				charti=new Highcharts.Chart({
					chart:{
                        renderTo:'pie',
						plotBackgroundColor:null,
						plotBorderWidth:null,
						plotShadow:false		
					},
					
					title:{
						text:'Browser market shares at a specific website, 2014'
					},
					
					subtitle:{
						text: ' Pie Chart'
					},
					tooltip: {
						pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,		
							cursor: 'pointer',
							dataLabels: {
								enabled: false		
								
							},
							showInLegend: true
						}
					},
					
					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]
						]
										
					}]
				
					
			});
			
		});	
	});
			

	</head>
	
	<body>
		
		<div class="container">
			<h1 align="center"><a href ="#">Different charts in one page</a></h1>
			<!--First chart-->
					<div class="col-md-6">		
						<div id="pie" style="min-width: 300px; height: 300px; margin: 30 auto"></div>		
					</div>
			
		</div>
	</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

如果你有正确的路径,它应该工作。我添加了这个,它工作正常

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>