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>
highcharts总结
猜你喜欢
转载自www.cnblogs.com/lijianli/p/9621269.html
今日推荐
周排行