`
lihuaylh
  • 浏览: 5320 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

HighCharts动态折线图

    博客分类:
  • JS
 
阅读更多







var chart;

$(function() {


Highcharts.setOptions({

    global: {

        useUTC: false

    }

});

    chart = new Highcharts.Chart({

        chart: {

            renderTo: 'container', //图表放置的容器,DIV

            defaultSeriesType: 'spline', //图表类型为曲线图

            events: {

                load: function() { 

                    var series = this.series[0];

                    //每隔5秒钟,图表更新一次,y数据值在0-100之间的随机数

                    setInterval(function() {

                        var x = (new Date()).getTime(), // 当前时间

                        y = Math.random()*100; 

                        series.addPoint([x, y], true, true);

                    },

                    5000);

               }

            }

        },

        title: {

            text: ''  //图表标题

        },

        xAxis: { //设置X轴

            type: 'datetime',  //X轴为日期时间类型

            tickPixelInterval: 80 //X轴标签间隔

        },

        yAxis: { //设置Y轴

            title : {

useHTML : true,

text : "流量"

},

            max: 100, //Y轴最大值

            min: 0  //Y轴最小值

        },

        tooltip: {//当鼠标悬置数据点时的提示框

            formatter: function() { //格式化提示信息

                return '时间:'+

                Highcharts.dateFormat('%H:%M:%S', this.x) +';流量: '+ 

                Highcharts.numberFormat(this.y, 2);

            }

        },

        legend: {

            enabled: true  //设置图例不可见

        },

        exporting: {

            enabled: false  //设置导出按钮不可用

        },

        series: [{

name: "流量1",

            data: (function() { //设置默认数据,

                var data = [],

                time = (new Date()).getTime();

           

for(var i = 0; i <= 23; i++) {

data.push({

x: time + i * 60 * 1000, 

y: Math.random()*100 

});

}


                return data;

            })()

        }]

    });

});


 

分享到:
评论

相关推荐

    Java和Highcharts实现折线图

    在这个场景中,我们将探讨如何使用Java和Highcharts这两个工具来实现一个动态的、交互式的折线图。Highcharts是一个流行的JavaScript库,专门用于创建高质量的图表,而Java则作为后端语言,负责处理数据并将其传递给...

    HighCharts多折线图实际应用【js+java】

    HighCharts的2017年使用的实例,此番为折线图,一个图里包含多条折线,业务需求:展示多个支付方式,在某段时间内,刷卡金额的趋势折线图。我用的方法比较笨,将支付方式一个一个列出来了,还有优化的空间,不过完全...

    JS UI控件 动态折线图

    动态折线图是一种常见的数据可视化工具,常用于展示随时间变化的趋势数据。在这篇文章中,我们将深入探讨JS UI控件如何实现动态折线图,并提供相关的编程技巧和知识点。 一、动态折线图的基本概念 动态折线图是一种...

    Highcharts画折线图

    这个"Highcharts画折线图"的主题涉及到使用Highcharts来绘制动态、交互式的折线图,这对于数据可视化和数据分析来说是非常重要的。下面将详细介绍如何利用Highcharts库创建折线图以及相关的知识点。 1. **...

    Highcharts 折线统计图

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的统计图表,包括折线图、柱状图、饼图、散点图等。在这个“Highcharts 折线统计图”的主题中,我们将深入探讨...

    highcharts快速生成百万数据点折线图.rar

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,包括折线图、柱状图、饼图等多种类型。在处理大数据量时,Highcharts提供了高效的优化策略,使得即使...

    highcharts实现从mysql数据库获取数据生成折线图

    本篇将详细介绍如何利用Highcharts结合MySQL数据库,实现在Web应用中动态生成折线图。 首先,我们需要了解Highcharts的基本使用。Highcharts是一个轻量级的图表库,它提供了丰富的API和配置选项,可以自定义图表...

    jq报表折线图

    "jq报表折线图"这个功能模块显然聚焦于利用jQuery(jq)库来实现动态和交互式的报表,特别是折线图这一图表类型。以下是关于这个主题的详细解释: **jQuery(jq)库** jQuery是一个轻量级的JavaScript库,它简化了...

    jquery easyui + Ztree +折线图

    在Web开发中,我们可以利用各种图表库,如ECharts、Highcharts等,结合JavaScript和CSS实现折线图的绘制。例如,如果你已经掌握了jQuery和EasyUI,那么可以进一步学习如何使用这些图表库与EasyUI集成,为你的应用...

    折线图demo highCharts

    在本例中,我们关注的是使用HighCharts库来创建折线图的Demo。 **HighCharts库简介** HighCharts是一个基于JavaScript的开源图表库,它提供了丰富的图表类型,包括折线图、柱状图、饼图、散点图等。HighCharts支持...

    asp生成折线图源码

    以下是一个简单的ASP+Highcharts生成折线图的代码片段: ```asp ' 假设我们有数据数组 Dim dataSeries : dataSeries = Array(10, 20, 30, 40, 50) ' 将数据序列化为JSON Dim jsonData : jsonData = Json....

    android_highcharts 折线图

    在Android开发中,Highcharts是一个常用的JavaScript图表库,它提供了丰富的图表类型,如折线图、柱状图、饼图等。...通过以上步骤,开发者可以在Android应用中集成动态、美观的折线图,为用户提供直观的数据展示。

    Struts2+HighChart+Jquery远程加载 折线图

    总结一下,这个教程将教你如何通过Struts2获取后端数据,利用jQuery的Ajax功能实现远程加载,最后通过HighChart展示动态的折线图。这种方法可以帮助开发者创建出实时更新、用户体验良好的数据可视化工具有,尤其适用...

    可滑动可点击的折线图

    这些库提供了丰富的API和配置选项,可以轻松实现动态交互的折线图,并且支持自定义样式和动画效果。 5. 应用场景: 这种类型的折线图特别适用于需要实时更新、用户需要深入探究数据细节的场景,例如金融市场的实时...

    highcharts 下钻 多个series 三级 四级 多级 多种图例 柱状图 饼状图 折线图

    解决highcharts多级下钻问题,下钻过程中使用了多种图例,自带上钻功能 c#,java使用方法一样,demo中使用c#方法实现 vs打开直接可以运行无需连接数据库 大数据可使用异步下钻...

    ASP.NET 折线图

    这个例子展示了如何利用jQuery的`$.ajax`方法请求ASP.NET页面生成的XML,然后解析XML并用Highcharts绘制3D折线图。在Highcharts配置中,我们指定了图表类型、3D效果的参数以及x轴和y轴的配置。 总结,实现ASP.NET中...

    可滑动折线图

    在数据分析和可视化领域,折线图是一种非常常见且实用的图表类型,用于展示数据随时间变化的趋势。在本文中,我们将深入探讨“可滑动折线图”这一主题,这是一种交互式图表,允许用户通过滑动来查看不同时间段的数据...

    渐变色Highcharts

    Highcharts是一款强大的JavaScript图表库,它允许开发者创建各种类型的图表,如折线图、柱状图、饼图等,并提供高度自定义的样式设置。 在描述中,“带例子”意味着包含的压缩包文件可能有具体的代码示例,展示如何...

    highcharts.js,实时折线图需要的样式

    Highcharts 是一个用纯JavaScript编写的一个图表库,HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

    java实现Echarts折线图历史数据显示(一)

    在本教程中,我们将探讨如何使用Java和ECharts来实现从MySQL数据库中获取历史数据并在前端展示为折线图。ECharts是一款由百度开源的、基于JavaScript的数据可视化库,能够生成丰富的图表类型,包括折线图。而Java...

Global site tag (gtag.js) - Google Analytics