highcharts柱狀圖

HighchartsDemo案例下載地址:

點擊打開鏈接


如圖所示


JSP代碼

<!DOCTYPE html>
<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts 測試柱狀圖顏色</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>		
<script src="./code/highcharts.js"></script>
<script src="./code/modules/exporting.js"></script> 
</head>
<script type="text/javascript">							       
$(function () {   
    $('#container').highcharts({  
        chart: {  
            type: 'column'  
        },  
        title: {  
            text: 'My first Highcharts chart'  
        },  
        xAxis: {  
            categories: ['my', 'first', 'chart']  
        },  
        yAxis: {  
            title: {  
                text: 'something'  
            }  
        },  
        series: [{  
            name: 'Jane',
			color:'#F6BD0F',	
            data: [1, 22, 4]  
        }, {  
            name: 'John',
			color:'#AFD8F8',			
            data: [5, 7, 3]  
        }, {  
            name: 'Jack',
			color:'#8BBA00',			
            data: [5, 7, 3]  
        }]  
    });  
});

</script>
<body>
 <div class="echarts" id="container" style="width:600px;height:400px"></div>
</body>

</html>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章