`
冰冻的心
  • 浏览: 12737 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Highcharts 曲线图 控制y轴动态显示 时分秒的格式数据

 
阅读更多
function load_app_id_avgTime(url,app_id,trendtype,datetype){

var datas="";
var date = [];
var count = [];
var count_type ="";
$("#trends_time_load").removeClass("hidden");//显示等待加载数据的图标
$.ajax({
        url: url,
        //请求数据
        type: "POST",
        async: true,
        data: {
            "app_id":app_id,
            "trendtype":trendtype,//
            "datetype":datetype
        },
        dataType: "json",
        success: function(datas) {
       
        count_type=datas.name;
              for (j in datas.data) {
              date.push(j);
              count.push(datas.data[j]);
                     }
            $("#trends_time_load").addClass("hidden");//隐藏加载的图标
            datas = "[{name: '" + count_type + "',data:[" + count + "]}]"; //组装数据图
            $('#trends_chartcontainer').highcharts({
              chart: {
                type: 'spline'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories:eval(date),
                labels:{
                    step:7,
                    rotation: 1,
                    align:'right'
                    }
            },
            yAxis: {
                title: {
                    text: ''
                },
                min:0,
            labels: {
                formatter: function() {
                  var hh = Math.floor(this.value / 3600);
                      var mm = Math.floor(this.value % 3600 / 60);
                      var ss = Math.floor(this.value % 60);
                    if (hh != 0) {
                     return hh + '时' +mm + '分'+ ss + '秒';
                   }else{
                   return mm + '分'+ ss + '秒';
                   }
                }
            }
            },
            tooltip: {
                enabled: true,
                formatter: function() {
                  var hh = Math.floor(this.y / 3600);
                  var mm = Math.floor(this.y % 3600 / 60);
                  var ss = Math.floor(this.y % 60);
                  if (hh == 0) {
                    return this.x + ' ' + this.series.name + ' : ' + mm +'分' + ss +'秒';
                  } else {
                    return this.x + ' ' + this.series.name + ' : ' + hh + '时' + mm +'分' + ss + '秒';
                  }
                }
              },
            plotOptions: {
            spline: {//控制曲线的粗细
                     lineWidth: 2,
                     states: {
                         hover: {
                             lineWidth: 2
                         }
                     },
                     marker: {
                         enabled: false
                     }
                    
            },
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: eval(datas)
        });
           
        },
        error: function(data) {
            alert("load data error");
        }
    });


}
  • 大小: 9.3 KB
分享到:
评论

相关推荐

    highcharts曲线图,饼状图

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,包括曲线图和饼状图。这个库以其简洁的API、强大的自定义能力和跨浏览器兼容性而受到欢迎。在本文中,...

    Highcharts 构建曲线图

    Highcharts是一款强大的JavaScript图表库,用于在Web应用中创建各种数据可视化效果,包括曲线图、柱状图、饼图等。在这个"Highcharts构建曲线图"的实例中,我们将深入探讨如何利用Highcharts来绘制一个基本的曲线图...

    highcharts 动态指定 x y数据

    Highcharts是一款强大的JavaScript...总之,Highcharts提供了灵活的方式来动态指定和更新X、Y轴数据,无论是静态数据还是实时数据,都能通过适当的方法实现。通过组合使用各种特性,可以构建出丰富且响应式的图表应用。

    highcharts曲线图

    "highcharts曲线图"指的是利用Highcharts库生成的曲线图表,这种图表通常用于展示随时间变化的数据,如股票价格、气温变化、销售趋势等。在实际应用中,动态地从本地TXT文件读取数据并实时更新曲线图是一种常见的...

    highcharts加载多条曲线数据

    3. **配置对象**:创建一个JavaScript对象,包含图表的配置信息,如标题、类型、数据、X轴和Y轴的设置等。例如,加载多条曲线数据的配置可能如下: ```javascript var chartOptions = { chart: { renderTo: '...

    echarts折线图曲线图分段用不同颜色显示,曲线改变颜色例子,Y轴超过某一数值曲线变色

    echarts折线图曲线图分段用不同颜色显示,Y轴超过某一数值变色,echarts曲线改变颜色例子,x轴和y轴数据可以自己定义,曲线默认显示黑色(black),400以上900以下显示成金色(gold)。 核心代码 visualMap: { show: false...

    highcharts.js实现曲线图、柱状图、面积图等

    Highcharts.js是一款强大的JavaScript图表库,它允许开发者轻松地在网页上创建各种动态、交互式的图表,包括曲线图、柱状图、面积图等多种图表类型。这个库以其易用性、灵活性和丰富的定制选项而受到广泛欢迎。在...

    折线、双Y轴、不交叉、highcharts、按照日期分割线

    在这个特定的场景中,我们关注的是如何使用Highcharts来绘制一个具有双Y轴的折线图,并且这两条折线不会交叉,同时根据日期设置分割线,而且要确保在旧版本的IE浏览器(如IE8)中也能正常工作。 首先,我们需要了解...

    Highcharts饼状图 柱状图 曲线图

    Highcharts是一款强大的JavaScript图表库,用于在Web页面上创建各种数据可视化效果,包括饼状图、柱状图和曲线图。这些图表类型是数据分析和展示的常用工具,可以帮助用户直观理解大量复杂数据。 饼状图在数据可视...

    Highcharts柱状图显示

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,包括柱状图、折线图、饼图等多种类型。在本案例中,我们聚焦于"Highcharts柱状图显示",特别是柱状图...

    Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载

    在这个"Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子"中,我们将探讨如何结合Java后端和JSON数据格式,通过AJAX技术在网页上展示动态曲线报表。 首先,`index_lineAjax.htm`是前端HTML文件,它包含了...

    在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图包含网页静态demo

    本项目利用Highcharts库、Ajax异步请求以及Json数据格式,实现了动态的曲线图、柱状图和饼图,为数据报表提供了一种直观且吸引人的呈现方式。 Highcharts是一个强大的JavaScript图表库,它支持多种图表类型,如折线...

    java实现的highcharts与ajax结合动态实时获取数据更新图表

    本教程将探讨如何在Java后端与前端使用Highcharts和Ajax结合,动态地从服务器获取数据并更新图表。 一、Highcharts的基本概念与使用 Highcharts是基于HTML5 SVG的图表库,支持现代浏览器和IE6+(通过VML)。它提供...

    Highcharts动态实现曲线图和饼型图的展示

    Highcharts 是一个强大的JavaScript库,专门用于创建高质量的数据可视化图表,包括曲线图、饼图等多种类型。在本文中,我们将深入探讨如何使用Highcharts动态实现曲线图和饼型图的展示。 首先,为了使用Highcharts...

    Highcharts实时趋势图

    数据通常以JSON格式提供,每一项代表一个数据点,包含x轴和y轴的值。对于实时趋势图,x轴通常是时间戳,y轴是对应的时间序列数据。 6. **交互功能** 高级特性如点击事件、数据列的钻取(drilldown)和工具提示...

    Highcharts实现图形报表

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者轻松地在网页上创建出各种高质量的数据可视化图形,如柱状图、线图、饼图、散点图等。在本项目中,“Highcharts实现图形报表”旨在利用Highcharts的功能,...

    Java和Highcharts实现折线图

    在这里,`DataPoint`是自定义的Java类,代表折线图的一个数据点,包含x轴和y轴的值。 接下来,我们需要了解Highcharts。Highcharts是一个JavaScript库,可以方便地在网页上创建各种类型的图表,包括折线图。在HTML...

    Highcharts 多个Y轴动态刷新数据的实现代码

    在本文中,我们将深入探讨如何使用Highcharts库创建一个具有多个Y轴并能动态刷新数据的图表。Highcharts是一款强大的JavaScript图表库,它允许开发者轻松地在网页上绘制各种类型的图表,如折线图、柱状图、饼图等。 ...

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

    在获取数据后,你需要将这些数据转换为Highcharts可接受的格式,并动态更新图表。可以使用Ajax请求从服务器获取数据,然后在客户端用`Highcharts.series[0].setData()`方法更新数据。 ```javascript $.ajax({ url:...

    highcharts动态柱状曲线仪表盘图

    highcharts 动态生成柱状图,曲线图,仪表盘图,调用totalReport方法,传入要生成图表的类型 和数据参数 标题等 可以自动生成图

Global site tag (gtag.js) - Google Analytics