highcharts动态图

function tempCurve() {
    Highcharts.setOptions({global: {useUTC: false}});
    var chart = Highcharts.chart('main3', {
        chart: {
            type: 'spline',
            animation: Highcharts.svg,
            marginRight: 10,
            backgroundColor: 'rgba(0,0,0,0)',

            events: {
                load: function () {
                    //设置更新
                    var series = this.series[0];
                    var _this = this;
                    var this_ = _this;
                    loadData = function (data) {
                        if (data == undefined) {
                            return;
                        }
                        if (data == false) {
                            $("#main3").html("暂无数据").css("color", "#fff")
                            return;
                        }

                        var addLength = 0;

                        if (this_.series.length < data.length) {
                            addLength += data.length - this_.series.length
                        }

                        for (var i = 0; i < addLength; i++) {
                            for (var i = 0; i < data.length; i++) {
                                this_.addSeries({

                                    name: data[i].message,
                                    data: (function () {
                                        var data = [],
                                            time = (new Date()).getTime(),
                                            i;
                                        for (i = -99; i <= 0; i += 1) {
                                            data.push({
                                                x: time + i * 1000 * 60,
                                            });

                                        }
                                        return data;
                                    }())
                                })
                            }
                        }

                        for (var i = 0; i < data.length; i++) {
                            x = (new Date()).getTime();// 当前时间
                            y = parseFloat(data[i].itemVal)
                            this_.series[i].addPoint([x, y], true, true);

                        }
                    };

                    loadData();

                }
            }
        },
        lang: {
            noData: "没有数据"
        },
        credits: {
            enabled: false
        },
        time: {
            useUTC: false
        },

        xAxis: {
            type: 'datetime',
            tickPixelInterval: 100,
            labels: {
                //  y: 20, //x轴刻度往下移动20px
                style: {
                    color: '#fff',//颜色
                }
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            plotLines: [{
                value: 0,
                width: 1
            }],
            labels: {
                formatter: function () {
                    return this.value
                },
                style: {
                    color: '#fff'
                }
            }
        }, tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
            }
        }, title: {
            text: '温度变化分析',
            style: {
                color: '#fff'     //字体颜色

            }
        },
        legend: {
            //enabled : false,
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            //              y: 130,
            borderWidth: 0,
            // 鼠标放上样式
            itemHoverStyle: {
                color: '#fff'
            }, itemStyle: {
                color: '#fff'
            }
            //设置图例不可见
        },
        exporting: {
            enabled: false
        }

    });

}

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值