highcharts绘制柱状图代码实例

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

翻译最新推荐文章于 2021-05-29 06:54:08 发布 · 1.8k 阅读

图表专栏收录该内容

3 篇文章

订阅专栏

分享一段代码实例，它利用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
          >