highcharts绘制折线数据图代码实例

最新推荐文章于 2021-05-29 06:54:08 发布
Return_KB
最新推荐文章于 2021-05-29 06:54:08 发布
阅读量545
点赞数
分类专栏：图表效果
效果同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
图表
3 篇文章 0 订阅
订阅专栏
分享一段代码实例，它实现了绘制折线数据图效果。
代码实例如下:
     
     
      
      
       
       [HTML] 
       
       纯文本查看 
       
       复制代码
       
       运行代码
      
      
      
      
       
       
        
         
            
              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 
             
            
              41 
             
            
              42 
             
            
              43 
             
            
              44 
             
            
              45 
             
            
              46 
             
            
              47 
             
            
              48 
             
            
              49 
             
            
              50 
             
            
              51 
             
            
              52 
             
            
              53 
             
            
              54 
             
            
              55 
             
            
              56 
             
            
              57 
             
            
              58 
             
            
              59 
             
            
              60 
             
            
              61 
             
            
              62 
             
            
              63 
             
            
              64 
             
            
              65 
             
             
              
              <!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  
              src 
              = 
              'http://cdn.hcharts.cn/highcharts/modules/exporting.js' 
              ></ 
              script 
              > 
              
              
              < 
              script 
              > 
              
              
              $(function() { 
              
              
                 
              $('#container').highcharts({ 
              
              
                   
              title: { 
              
              
                     
              text: '', 
              
              
                     
              x: -20 //center 
              
              
                   
              }, 
              
              
                   
              subtitle: { 
              
              
                     
              text: '', 
              
              
                     
              x: -20 
              
              
                   
              }, 
              
              
                   
              xAxis: { 
              
              
                     
              categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
              
              
                       
              'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' 
              
              
                     
              ] 
              
              
                   
              }, 
              
              
                   
              yAxis: { 
              
              
                     
              title: { 
              
              
                       
              text: 'Temperature (°C)' 
              
              
                     
              }, 
              
              
                     
              plotLines: [{ 
              
              
                       
              value: 0, 
              
              
                       
              width: 1, 
              
              
                       
              color: '#808080' 
              
              
                     
              }] 
              
              
                   
              }, 
              
              
                   
              tooltip: { 
              
              
                     
              valueSuffix: '°C' 
              
              
                   
              }, 
              
              
                   
              legend: { 
              
              
                     
              layout: 'vertical', 
              
              
                     
              align: 'right', 
              
              
                     
              verticalAlign: 'middle', 
              
              
                     
              borderWidth: 0 
              
              
                   
              }, 
              
              
                   
              series: [{ 
              
              
                     
              name: 'Tokyo', 
              
              
                     
              data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
              
              
                   
              }, { 
              
              
                     
              name: 'New York', 
              
              
                     
              data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
              
              
                   
              }, { 
              
              
                     
              name: 'Berlin', 
              
              
                     
              data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
              
              
                   
              }, { 
              
              
                     
              name: 'London', 
              
              
                     
              data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
              
              
                   
              }] 
              
              
                 
              }); 
              
              
              }); 
              
              
              </ 
              script 
              > 
              
              
              </ 
              head 
              > 
              
              
              < 
              body 
              > 
              
              
              < 
              div  
              id 
              = 
              'container'  
              style 
              = 
              "min-width: 400px;height: 400px;" 
              ></ 
              div 
              > 
              
              
              </ 
              body 
              > 
              
              
              </ 
              html 
              >