您的位置：首页 > 编程语言

Highcharts柱状图数据展示代码

2013-12-09 10:58 218 查看
前端
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>z</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {

function requestData() {
//setTimeout(requestData, 3000);
$.getJSON('etc.php',displayData);

}
function displayData(dataJSON)
{
var series = chart.series[0];
var data = dataJSON;
series.setData(data);
categories = setCate(data);
chart.xAxis[0].setCategories(categories);

}

function setCate(data)
{
var arr = [];
for(var i in data)
{
arr.push(data[i]['name']);
}
return arr;
}

chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
margin: [ 50, 50, 100, 80],
events: {
load: requestData
}
},
title: {
text: 'World\'s largest cities per 2008'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},

/*
xAxis: {

categories: [
'Tokyo',
'Jakarta',
'New York',
'Seoul',
'Manila',
'Mumbai',
'Sao Paulo',
'Mexico City',
'Dehli',
'Osaka',
'Cairo',
'Kolkata',
'Los Angeles',
'Shanghai',
'Moscow',
'Beijing',
'Buenos Aires',
'Guangzhou',
'Shenzhen',
'Istanbul',
''
],

labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
*/

yAxis: {
min: 0,
title: {
text: 'Population (millions)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>',
},
series: [{
name: 'Population',
data: [
{name:'aa', y:35},
34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,
17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
11.7, 11.2],

dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}

}]
});
});

</script>
</head>
<body>
<script src="js/hc.js"></script>
<script src="js/modules/exporting.js"></script>

<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>

</body>
</html>

后端php
<?php
// Set the JSON header
header("Content-type: text/json");

area();

/**
* 地区接口
* name名称
* y数据值
*
*/
function area()
{
$b = array(
array('name'=>'上海', 'y'=>28.2),
array('name'=>'北京', 'y'=>48.2),
array('name'=>'广东', 'y'=>18.2),
);

$data = json_encode($b);
echo($data);
}

?>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航