highcharts绘制柱状图代码实例

最新推荐文章于 2021-05-29 06:54:08 发布

Return_KB

最新推荐文章于 2021-05-29 06:54:08 发布

阅读量1.7k

点赞数

分类专栏：图表

图表专栏收录该内容

3 篇文章 0 订阅

订阅专栏

分享一段代码实例，它利用highcharts实现柱状图效果。

代码实例如下:

 
 
  
  
   
   
    
     
        
          01 
         
        
          02 
         
        
          03 
         
        
          04 
         
        
          05 
         
        
          06 
         
        
          07 
         
        
          08 
         
        
          09 
         
        
          10 
         
        
          11 
         
        
          12 
         
        
          13 
         
        
          14 
         
        
          15 
         
        
          16 
         
        
          17 
         
        
          18 
         
        
          19 
         
        
          20 
         
        
          21 
         
        
          22 
         
        
          23 
         
        
          24 
         
        
          25 
         
        
          26 
         
        
          27 
         
        
          28 
         
        
          29 
         
        
          30 
         
        
          31 
         
        
          32 
         
        
          33 
         
        
          34 
         
        
          35 
         
        
          36 
         
        
          37 
         
        
          38 
         
        
          39 
         
        
          40 
         
         
          
          <!doctype html> 
          
          
          < 
          html 
          > 
          
          
          < 
          head 
          > 
          
          
          < 
          meta  
          charset 
          = 
          "utf-8" 
          > 
          
          
          < 
          title 
          >柱状图</ 
          title 
          > 
          
          
          < 
          script  
          src 
          = 
          'http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js' 
          ></ 
          script 
          > 
          
          
          < 
          script  
          src 
          = 
          'http://cdn.hcharts.cn/highcharts/highcharts.js' 
          ></ 
          script 
          > 
          
          
          < 
          script 
          > 
          
          
          $(function() { 
          
          
             
          $('#container').highcharts({ 
          
          
               
          chart: { 
          
          
                 
          type: 'column' 
          
          
               
          }, 
          
          
               
          title: { 
          
          
                 
          text: '' 
          
          
               
          }, 
          
          
               
          xAxis: { 
          
          
                 
          categories: ['Android', 'iOS', 'web'] //指定x轴分组 
          
          
               
          }, 
          
          
               
          yAxis: { 
          
          
                 
          title: { 
          
          
                   
          text: 'something' 
          
          
                 
          } 
          
          
               
          }, 
          
          
               
          series: [{ //指定数据列 
          
          
                 
          name: '小明', //数据列名 
          
          
                 
          data: [1, 0, 4] //数据 
          
          
               
          }, { 
          
          
                 
          name: '小红', 
          
          
                 
          data: [5, 7, 3] 
          
          
               
          }] 
          
          
             
          }); 
          
          
          }); 
          
          
          </ 
          script 
          > 
          
          
          </ 
          head 
          > 
          
          
          < 
          body 
          > 
          
          
          < 
          div  
          id 
          = 
          "container"  
          style 
          = 
          "min-width:800px;height:800px;" 
          ></ 
          div 
          > 
          
          
          </ 
          body 
          > 
          
          
          </ 
          html 
          >