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

Highcharts图表的setCategories

2013-12-09 10:58 253 查看 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</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 = [{name:"\u4e0a\u6d77","y":20},{"name":"\u5317\u4eac","y":10},{"name":"\u5929\u6d25","y":35}];
series.setData(data);
//类似这里，可以直接用set来添加，如同上面的setData都是加上set直接设置，很方便的改变x坐标的数据
chart.xAxis[0].setCategories(["2012-01-01","2012-03-03","2012-05-01","2012-08-01","2012-10-01","2012-11-11"]);
//chart.xAxis[1].setCategories(['Apples', 'Bananas', 'Oranges']);
//alert(chart.xAxis[0].categories.length);

alert(chart.xAxis[0].categories.length);
//chart.addSeries(series);  //可以直接增加addSeries
}

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>
                                            

                                        

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

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航