zoukankan      html  css  js  c++  java
  • highcharts画面积图

      1 $(function () {
      2     var categories= [
      3                 '前五日',
      4                 '前四日',
      5                 '前三日',
      6                 '前两日',
      7                 '前一日',
      8                 '后一日',
      9                 '后两日',
     10                 '后三日',
     11                 '后四日',
     12                 '后五日'
     13             ];
     14     $('#container').highcharts({
     15         chart: {
     16             type: 'areaspline',
     17             zoomType:'x',
     18             660,
     19             height:260
     20             //padding:0
     21         },
     22         colors:['#65b5f3','#ff9399','#cdcdcd'],
     23         exporting:{
     24             enabled:false
     25         },
     26         title: {
     27             text: ''
     28         },
     29         
     30         legend: {
     31             enabled:false,
     32             //layout: 'horizon',
     33             align: 'left',
     34             verticalAlign: 'top',
     35             x: 300,
     36             y: -10,
     37             floating: true,
     38             //borderWidth: .1,
     39             //backgroundColor: '#FFFFFF',
     40             //margin:14,
     41             symbolWidth:14,
     42             symbolHeight:3,
     43             //padding:10,
     44             300
     45         },
     46         xAxis: {
     47             lineColor:"#efefef",
     48             tickLength:0,
     49             color:'#8d8d8d',
     50             labels:{
     51                 style:{
     52                     color:"#8d8d8d"
     53                 },
     54                 formatter:function(){
     55                     return categories[this.value];
     56                 }
     57             }
     58             //tickInterval:1
     59         },
     60         yAxis: {
     61             title: {
     62                 text: ''
     63             },
     64             lineWidth:1,
     65             gridLineWidth:1,
     66             tickInterval:1,
     67             tickColor:'red',
     68             gridLineColor:'#efefef',
     69             lineColor:"#efefef",
     70             labels:{
     71                 style:{
     72                     color:"#8d8d8d"
     73                 }
     74             }
     75         },
     76         tooltip: {
     77             shared: true,
     78             valueSuffix: ' units',
     79             backgroundColor:'#2c3238',
     80             crosshairs: {
     81                  1,
     82                 color: '#777',
     83                 dashStyle: 'dash'
     84             },
     85             style:{
     86                 color:'#fff'
     87             },
     88             formatter:function(){
     89                 var data = this.points;
                var html = "";
                for(var i = 0 ; i < data.length; i++){
                  html+= "<span>"+data[i].series.name+":"+data[i].y+"</span><br>";
                }
     90                 return html;
     91             }
     92         },
     93         credits: {
     94             enabled: false
     95         },
     96         plotOptions: {
     97             areaspline: {
     98                 fillOpacity: 0.2,
     99                 lineWidth:1,
    100                 marker:{
    101                     states:{
    102                         hover:{
    103                             enabled:false
    104                         }
    105                     }
    106                 }
    107             },
    108             series : {
    109                 marker:{
    110                     enabled:false
    111                 },
    112                 states:{
    113                     hover:{
    114                         lineWidth:1
    115                     }
    116                 }
    117             },
    118             area:{
    119                 marker:{
    120                     states:{
    121                         hover:{
    122                             lineWidth:1  //去掉区域边界线加粗的效果
    123                         }
    124                     }
    125                 }
    126             }
    127         },
    128         series: [{
    129             name: '2015年',
    130             data: [10, 4, 1, 5, 4, 10, 12,1,9]
    131         }, {
    132             name: '2014年',
    133             data: [0, 3, 4, 1, 3, 10, 4,1,9]
    134         }, {
    135             name: '2013年',
    136             data: [11, 11, 9, 1, 3, 1, 4,2,9]
    137         }]
    138     });
    139 });                
  • 相关阅读:
    LNK2001: unresolved external symbol ... virtual ...
    pygments
    cygwin Mingw
    [转]__attribute__((format (printf, 2, 3))
    [转] C和C++混合编程
    [转]网络包的流转
    [转]程序是如何运行起来的
    [转]Makefile中 .PHONY的作用
    [转]makefile学习
    [转] makefile 中 = := ?= += 区别
  • 原文地址:https://www.cnblogs.com/lr-blog/p/5140247.html
Copyright © 2011-2022 走看看