jquery-highcharts取得json数据
日期：2014-05-16 浏览次数：20527 次
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="gb2312" />
<title>饼图-例子</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/exporting.js" type="text/javascript"></script>
<script type="text/javascript">
??
???var chart;
$(document).ready(function() {
?? var chart = new Highcharts.Chart({
????? chart: {
???????? renderTo: 'container',
???????? plotBackgroundColor: null,
???????? plotBorderWidth: null,
???????? plotShadow: false
????? },
????? title: {
???????? text: 'Browser market shares at a specific website, 2010'
????? },
????? tooltip: {
???????? formatter: function() {
??????????? return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
???????? }
????? },
????? 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],
??????????? {
?????????????? name: 'IE',???
?????????????? y: 26.8,
?????????????? sliced: true,
?????????????? selected: true
??????????? },
??????????? ['Chrome',??? 12.8],
??????????? ['Safari',??? 8.5],
??????????? ['Opera',???? 6.2],
??????????? ['Others',?? 0.7]
???????? ]
????? }]
?? });
??
?? function getForm(){??
?//var data = ["['Firefox',45.0]","[{name: 'Chrome',y: 26.8,sliced: true,selected: true}]","['IE',12.8]","['Safari',8.5]","['Opera',6.2]","['Others',0.7]"];
??? //var data = "[{'Firefox',45.0},{'Chrome',26.8},{'IE',12.8},{'Safari',8.5},{'Opera',6.2},{'Others',0.7}]";
?
? var data = [['Firefox',45.0],{name: 'Chrome',y: 26.8,sliced: true,selected: true},['IE',12.8],['Safari',8.5],['Opera',6.2],['Others',0.7]];
????????????
????????????
??????????????? chart.series[0].setData(data);?
???????????????
???????????
???????????????
????????? chart.redraw();
???????
??????? }??
?
??????
??????? $(document).ready(function() {??
??????????? //每隔3秒自动调用方法，实现图表的实时更新??
?????????? // window.setInterval(getForm,3000);???
?????????????? getForm();
??????? });??
??
});
??</script>
</head>
<body>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto ;border:1px #000000 solid;"></div>
</body>
</html>
