highcharts总结 - 来了^O^老弟

  1 <!DOCTYPE HTML>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <meta name="viewport" content="width=device-width, initial-scale=1">
  6         <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
  7         <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
  8         曲线上方不需要显示文字可以注释掉这个
  9         <!--<script src="https://img.hcharts.cn/highcharts/modules/series-label.js"></script>-->   
 10         <script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
 11         <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
 12     </head>
 13     <body>
 14         <div id="container" style="max-width:800px;height:400px"></div>
 15         <script>
 16             var chart = Highcharts.chart('container', {
 17                 chart: {
 18                     type: 'line'
 19                 },
 20                 title: {     //标题，如不需要可以置空
 21                     text: ''
 22                 },
 23                 subtitle: {    //副标题
 24                     text: ''
 25                 },
 26                 xAxis: {
 27                     labels: {
 28                         enabled: false    //是否显示x轴的标签
 29                     },
 30                     type: 'datetime',    //如果x轴是时间，设置该项可以进行格式转换
 31                 },
 32                 yAxis: {
 33                     title: {
 34                         text: ''          //y轴标题
 35                     },
 36                     labels: {
 37                         enabled: false    //是否显示y轴的标签
 38                     }
 39                 },
 40                 legend: {                 //图例设置
 41                     layout: 'vertical',
 42                     align: 'right',
 43                     verticalAlign: 'middle',
 44                     width:0,
 45                     enabled: false,      //是否显示
 46                 },
 47                 navigation:{             //导航，下载保存为图片的地方
 48                     buttonOptions:{
 49                         enabled:false
 50                     }
 51                 },
 52                 credits:{
 53                     enabled:false    //版权信息是否显示
 54                 },
 55                 tooltip:{            //数据提示框
 56                     backgroundColor:'#FFFFFF',
 57                     borderColor:'#cccccc',
 58                     shared: true,
 59                     useHTML: true,
 60                     formatter:function() {     //通过该方法可以返回自定义的提示内容，要同时设置上面两项
 61                         var points = this.points;
 62                         var _time = this.x;
 63                         //时间格式化
 64                         _time = new Date(_time);
 65                         var year = _time.getFullYear();
 66                         var month = _time.getMonth()+1;
 67                         var date = _time.getDate();
 68                         year = year.toString().substr(2,2);
 69 
 70                         var str_time = [date,month,year].join('/');
 71 
 72                         var header = '<b style="margin:10px 0;display:block;font-weight:700">'+ str_time +'</b><table>';
 73                         var body   = '';
 74                         var footer = '</table>';
 75                         for(var i=0;i<points.length;i++){
 76                             var _color = points[i].series.color;
 77                             var _y     = points[i].y;
 78                             var _name  = points[i].series.name;
 79 
 80                             //单独给某一项设置百分比显示
 81                             if(points[i].series.name == "CTR"){
 82                                 body+= '<tr><td style="width:30px;height:1px;background:'+ _color +';display:inline-block;margin-right:10px"></td><td style="color:'+ _color +'">'+ _name +': </td><td style="text-align: left"><b id="point_name">'+ _y +'%</b></td></tr>';
 83                             } else {
 84                                 body+= '<tr><td style="width:30px;height:1px;background:'+ _color +';display:inline-block;margin-right:10px"></td><td style="color:'+ _color +'">'+ _name +': </td><td style="text-align: left"><b id="point_name">'+ _y +'</b></td></tr>';
 85                             }
 86                         }
 87                         return  header+body+footer;
 88                     },
 89                     xDateFormat: '%d/%m/%Y',
 90                 },
 91                 plotOptions: {
 92                     series: {        //设置标记点的样式
 93                         label: {
 94                             connectorAllowed: false
 95                         },
 96                         marker:{
 97                             enabled:false,
 98                             symbol:'circle',     //这里可以设置数据点的全局样式，统一为某一种
 99                             radius:5,
100                         },
101                         negativeColor:'#fff',
102                         allowPointSelect:false,
103                         cursor: 'pointer',
104                         states:{
105                             hover:{
106                                 halo:'false'   //这里设置鼠标移到数据点上时数据点不显示外层圆圈
107                             }
108                         },
109                         //处理x轴的时间格式，要配合xAxis下面的type:'datetime'使用
110                         pointStart: Date.UTC(2017, 0, 1),
111                         pointInterval: 24 * 3600 * 1000,
112                     }
113                 },
114                 series: [{             //设置相关数据及其他信息
115                     name: 'Clicks',
116                     data: [13, 22, 27, 21, 22, 35, 41, 41,21],
117                     color:'#4d90fe',
118                 }, {
119                     name: 'Impressions',
120                     data: [24, 24, 29, 20, 32, 30, 38, 40,32],
121                     color:'#dd4b39'
122                 }, {
123                     name: 'CTR',
124                     data: [11.23, 17.34, 16.12, 19.43, 20.54, 24.65, 28.34, 30.32,42.54],
125                     color:'#ff9900'
126                 }, {
127                     name: 'Position',
128                     data: [29, 31, 39, 12, 15, 22, 34, 39,28],
129                     color:'#109618'
130                 }],
131                 responsive: {
132                     rules: [{
133                         condition: {
134                             maxWidth: 500
135                         },
136                         chartOptions: {
137                             legend: {
138                                 layout: 'horizontal',
139                                 align: 'center',
140                                 verticalAlign: 'bottom'
141                             }
142                         }
143                     }]
144                 }
145             });
146         </script>
147     </body>
148 </html>
posted on 2018-09-10 17:34 来了^O^老弟阅读(460) 评论(0) 编辑收藏举报
刷新页面返回顶部