highchart 图标 时钟的使用

$(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-width: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>

highchart 图标 时钟的使用_第1张图片highchart 图标 时钟的使用_第2张图片

//这里是我自定义三十天日期的数组  还有 处理对应格式数据的方法
 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="width: 400px; height: 400px; margin: 0 auto">div>

 

你可能感兴趣的:(highchart 图标 时钟的使用)