heightchart配置详解

Posted 2020-08-31 打你一下

<div id="container" style="width: 100%; margin: 0 auto"></div>
<script language="javascript">
$(document).ready(function() {
   var d=[‘Jan12‘, ‘Feb13‘, ‘Mar14‘, ‘Apr‘, ‘May‘, ‘Jun‘,
         ‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘,‘Dec‘,‘Dec‘,‘Dec‘,‘Dec‘];
  var exporting={buttons:{exportButton:{enabled:true,}}};
   var credits={
        href:false,
        enabled:false,
        text:true//不显示连接
     };
     var legend = {
        enabled: false
     };
   var title = {
      text: ‘成长足迹‘   
   };
   var xAxis = {
      title: {
         text: ‘ ‘
      },
      labels: {
         enabled: false,//刻度值不显示
      },
      tickWidth:0,//刻度标签不显示
      lineColor:‘#FFFFFF‘,
      lineWidth: 0,
      categories:d,
   };
   var a=xAxis.categories;
   var c=a.length*100;
   $("#container").css(‘height‘,c+"px");
   var b=[];
   for(var i=0;i<a.length;i++){
       b[i]=10;
   }
   var yAxis = {
      title: {
         text: ‘Temperature (\xB0C)‘
      },
      title: {
         text: ‘ ‘
      },
      labels: {
         enabled: false,//刻度值不显示
      },
      tickWidth:0,//刻度标签不显示
      lineColor:‘#FFFFFF‘,
      lineWidth: 0,
      plotLines: [{
         value: 0,
         width: 1,
         color: ‘#808080‘
      }]
   };   
    var plotOptions = {
            series: {
            lineWidth:5,
            allowPointSelect :true,
            animation:true,
            //lineColor:‘blue‘,
            enableMouseTracking:true,//显示提示框
              marker: {
                  enabled:true,
                  radius: 10,//点的大小
                  //fillColor: ‘#DD7272‘,
                  lineColor: ‘#DEECF9‘,
                  lineWidth:5,
                  //shadow:true，
                  states:{
                     hover:{
                        radius: 20,
                        enabled:true,
                     }
                  }
              }
           }
        };
   var tooltip = {
      valueSuffix: ‘\xB0C‘,
      pointFormat:‘‘,
      pointFormatter: function() {
          return d[this.x];
      }

   }
   var series =  [
      {
         //name: ‘Tokyo‘,
         data:b
      }
      
   ];

   var json = {};
   var chart={
   inverted: true,
   };
   json.exporting=exporting;
   json.credits=credits;
   json.chart=chart;
   json.legend = legend;
   json.plotOptions=plotOptions;
   json.title = title;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.tooltip = tooltip;
   json.series = series;

   $(‘#container‘).highcharts(json);
});