highchart 图标 时钟的使用

Posted 2020-09-14 hero

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

//这里是我自定义三十天日期的数组  还有 处理对应格式数据的方法
 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>

<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>