$(function () { $('#container').highcharts({ chart: { type: 'line' }, title: { text: '月平均气温' }, subtitle: { text: '数据来源: WorldClimate.com' }, xAxis: { categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] }, yAxis: { title: { text: '气温 (°C)' } }, plotOptions: { line: { dataLabels: { enabled: true // 开启数据标签 }, enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效 } }, series: [{ name: '东京', data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: '伦敦', 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] }] }); });
<div id="container" style="min-400px;height:400px"></div>
//外部引入 <link rel="icon" href="https://static.jianshukeji.com/hcode/images/favicon.ico"> <script type="text/javascript" src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="https://img.hcharts.cn/highcharts/highcharts.js"></script> <script type="text/javascript" src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script> <script type="text/javascript" src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
//这里是我自定义三十天日期的数组 还有 处理对应格式数据的方法 var myDate = new Date(); //获取今天日期 myDate.setDate(myDate.getDate() - 30); var dateTemp; var flag = 1; for (var i = 0; i < 30; i++) { dateTemp = (myDate.getMonth()+1)+"月"+myDate.getDate()+'日'; dayArray.push(dateTemp); myDate.setDate(myDate.getDate() + flag); } for (var i = 0; i < 30; i++) { dateTemp = (myDate.getMonth()+1)+"月"+myDate.getDate()+'日'; sevenArray.push(dateTemp); myDate.setDate(myDate.getDate() + flag); } for (var i = 0; i < 24; i++) { dateTemp = 1+"时"; timeArray.push(dateTemp); myDate.setDate(myDate.getDate() + flag); } var day = new Date(item.receivetime).getMonth()+1+"月"+new Date(item.receivetime).getDate()+'日'; // console.log(item.totalsteps.split('|')); // console.log(day); var steps = item.totalsteps.split('|'); data.data.forEach(function(item){ if(obj[day]){ obj[day]+=Number(steps[steps.length-1]) // stepss.push(steps) }else{ obj[day]=Number(steps[steps.length-1]) } }) // console.log(dayArray) ; }); // console.log(obj) dayArray.forEach(function(item){ if(obj[item]){ // console.log(obj[item]); totalsteps.push(obj[item]); }else{ totalsteps.push(0); //每天步数 } });
感觉最烦的就是处理数据了，给一打数据。 每个公司的套路不同，我也没法完全展现 下面是时钟的
<div id="container" style=" 400px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript"> $(function () { /** * Get the current time */ function getNow() { var now = new Date(); return { hours: now.getHours() + now.getMinutes() / 60, minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600, seconds: now.getSeconds() * 12 / 60 }; } /** * Pad numbers */ function pad(number, length) { // Create an array of the remaining length + 1 and join it with 0's return new Array((length || 2) + 1 - String(number).length).join(0) + number; } var now = getNow(); // Create the chart $('#container').highcharts({ chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, height: 400 }, credits: { enabled: false }, title: { text: '时钟' }, pane: { background: [{ // default background }, { // reflex for supported browsers backgroundColor: Highcharts.svg ? { radialGradient: { cx: 0.5, cy: -0.4, r: 1.9 }, stops: [ [0.5, 'rgba(255, 255, 255, 0.2)'], [0.5, 'rgba(200, 200, 200, 0.2)'] ] } : null }] }, yAxis: { labels: { distance: -20 }, min: 0, max: 12, lineWidth: 0, showFirstLabel: false, minorTickInterval: 'auto', minorTickWidth: 1, minorTickLength: 5, minorTickPosition: 'inside', minorGridLineWidth: 0, minorTickColor: '#666', tickInterval: 1, tickWidth: 2, tickPosition: 'inside', tickLength: 10, tickColor: '#666', title: { text: '君子一诺lv<br/>Highcharts', style: { color: '#BBB', fontWeight: 'normal', fontSize: '8px', lineHeight: '10px' }, y: 10 } }, tooltip: { formatter: function () { return this.series.chart.tooltipText; } }, series: [{ data: [{ id: 'hour', y: now.hours, dial: { radius: '60%', baseWidth: 4, baseLength: '95%', rearLength: 0 } }, { id: 'minute', y: now.minutes, dial: { baseLength: '95%', rearLength: 0 } }, { id: 'second', y: now.seconds, dial: { radius: '100%', baseWidth: 1, rearLength: '20%' } }], animation: false, dataLabels: { enabled: false } }] }, // Move function (chart) { setInterval(function () { now = getNow(); var hour = chart.get('hour'), minute = chart.get('minute'), second = chart.get('second'), // run animation unless we're wrapping around from 59 to 0 animation = now.seconds === 0 ? false : { easing: 'easeOutElastic' }; // Cache the tooltip text chart.tooltipText = pad(Math.floor(now.hours), 2) + ':' + pad(Math.floor(now.minutes * 5), 2) + ':' + pad(now.seconds * 5, 2); hour.update(now.hours, true, animation); minute.update(now.minutes, true, animation); second.update(now.seconds, true, animation); }, 1000); }); }); // Extend jQuery with some easing (copied from jQuery UI) $.extend($.easing, { easeOutElastic: function (x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; } }); </script>