HighCharts 图表插件 自定义绑定 时间轴数据，解决时间轴自动显示数据与实际绑定数据时间不对应问题！

可能要用到的源码片段：http://code.662p.com/list/14_1.html
     学习示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>喊单收益曲线图</title>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>

    <script src="highcharts.js" type="text/javascript"></script>

    <script src="exporting.js" type="text/javascript"></script>

</head>

<body style="margin: auto;">

    <!-- 喊单收益曲线图 -->

    <div id="container" style="width: 100%; height: 100%; margin: 0 auto">

    </div>

</body>

</html>

<script type="text/javascript" language="javascript">

    /*

    * 官方文档： http://www.highcharts.me/

    */

    var chart, myTime = "", myData = "";

    $(function () {

        //盈利率

        myData = "[-20.25,-12.30,-3.68,5.45,19.00,-2.78,-5.45,9.80,10.45,16.15]";

        options.series[0].data = eval(myData);

        //时间

        myTime = "['2014-03-01 01:10','2014-03-01 01:30','2014-03-01 01:45','2014-03-01 02:30','2014-03-01 02:45','2014-03-01 03:00','2014-03-01 03:40','2014-03-01 04:50','2014-03-01 05:05','2014-03-01 06:06']";

        options.xAxis.categories = eval(myTime);

        //加载图表

        chart = new Highcharts.Chart(options);

    });

    var options = {

        chart: {

            renderTo: 'container',

            zoomType: 'x'

        },

        title: {

            text: '喊单收益曲线图'

        },

        subtitle: {

            text: '点击并拖动绘图区域的放大'

        },

        xAxis: {

            title: {

                text: null

            },

            labels: {

                formatter: function () {

                    return this.value;

                }

            }

        },

        yAxis: {

            title: {

                text: '盈利率'

            },

            labels: {

                formatter: function () {

                    return this.value + "%";

                }

            },

            startOnTick: false,

            showFirstLabel: false

        },

        tooltip: {

            formatter: function () {

                return '' + '日期：' + this.x

                          + '

盈利率：' + Highcharts.numberFormat(this.y, 2) + "%";

            }

        },

        legend: {

            enabled: false

        },

        plotOptions: {

            area: {

                fillColor: {

                    linearGradient: [0, 0, 0, 300],

                    stops: [

                                                                [0, '#4572A7'],

                                                            [1, 'rgba(2,0,0,0)']

                                                   ]

                },

                lineWidth: 1,

                marker: {

                    enabled: false,

                    states: {

                        hover: {

                            enabled: true,

                            radius: 5

                        }

                    }

                },

                shadow: false,

                states: {

                    hover: {

                        lineWidth: 1

                    }

                }

            }

        },

        series: [{

            type: 'area',

            name: '盈利率'

        }]

    }

</script>

　　

详细说明：http://wp.662p.com/thread-8118-1-1.html

HighCharts 图表插件 自定义绑定 时间轴数据的更多相关文章

  1. jQuery HighchartsTableHTML表格转Highcharts图表插件

    版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highc ...

  2. highcharts图表插件初探

    转载请注明出处:http://www.cnblogs.com/liubei/p/highchartsOption.html HighCharts简介 Highcharts 是一个用纯JavaScrip ...

  3. Highcharts图表插件的简单使用说明

    Highcharts图表控件是眼下使用最为广泛的图表控件.本文将从零開始逐步为你介绍Highcharts图表控件. 通过本文.你将学会怎样配置Highcharts以及动态生成Highchart图表. ...

  4. Android自定义指示器时间轴

    指示器时间轴在外卖.购物类的APP里会经常用到,效果大概就像下面这样,看了网上很多文章,大都是自己绘制,太麻烦,其实通过ListView就可以实现.   在Activity关联的布局文件activit ...

  5. MYSQL 时间轴数据 获取同一天数据的前3条

    创建表数据 CREATE TABLE `praise_info` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'ID', `pic_id` va ...

  6. highcharts图表及报表展示、导出数据

    @ 目录 前言 一.使用highcharts前后端交互展示图表,及使用报表导出 二.实现思路 1.图表可以选择echarts.highcharts,我们这里选择highcharts(echarts使用 ...

  7. jquery图表插件morris.js参数详解和highcharts图表插件

    一.morris.js 优点:轻巧.简单好用 缺点:没highcharts功能多,常用的足以 网址:http://morrisjs.github.io/morris.js/ 核心代码 1.head调用 ...

  8. highcharts图表组件入门教程：如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度

    highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小  大] | ...

  9. 看看我做的一款 时间轴 插件 timegliderJs

    TimegliderJs 是一款基于jQuery的时间轴插件.完成后效果. 介绍 Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件.非常适合显示项目历史,项目计划及 ...

随机推荐

  1. HTTP数据包详解

     无论Web技术在未来如何发展,理解Web程序之间通信的基本协议相当重要, 因为它让我们理解了Web应用程序的内部工作. 本文将对HTTP协议进行详细的实例讲解,内容较多,希望大家耐心看. 阅读目录 ...

  2. Xcache3.2.0不支持php7.0.11

    编译安装xcache3.2.0时在make这一步报错: AUTOCHECK missing : "arg_flags" "cache_size" AUTOCHE ...

  3. Linux—Ubuntu14.0.5安装Redis

    1.前言 Redis是常用基于内存的Key-Value数据库,比Memcache更先进,支持多种数据结构,高效,快速.用Redis可以很轻松解决高并发的数据访问问题:做为时时监控信号处理也非常不错. ...

  4. Nginx Rewrite（伪静态）

    一.作用: 实现URL地址改写. 二.语法: 例:rewrite ^/(.*) http://bbs.wangguangtao.com/$1 permanent; 注:应用位置server.loeat ...

  5. TCriticalSection(Delphi)

    临界区对象TCriticalSection(Delphi) 与 TRtlCriticalSection 的区别 临界区对象TCriticalSection(Delphi) 与 TRtlCritical ...

  6. dubbo-dubboAdmin安装(一)

    简介 Dubbo是什么? dubbo是阿里开源的分布式服务治理框架,对服务的负载均衡,权重,监控,路由规则,禁用启用的管理,以及服务的自动注册和发现 分布式架构下面临问题 在分布式架构下,我们会将一个 ...

  7. mysql 的load data infile

    LOAD DATA INFILE语句从一个文本文件中以很高的速度读入一个表中.如果指定LOCAL关键词,从客户主机读文件.如果LOCAL没指定,文件必须位于服务器上.(LOCAL在MySQL3.22. ...

  8. HDU 2457

    直接从root遍历扩展DP,当扩展到的字母和字符串字母相同时,不用修改,不同时,要求修改加1 注意不要扩展危险结点. #include <iostream> #include <cs ...

  9. UnrealEngine4之UObject（一）

    Runtime最关键的实现是UObject,它是全部引擎层面.游戏层面对象的基类. UObject实现了动态创建.持久化.脚本化.内存管理.生存期控制. ----------------------- ...

  10. [Sencha ExtJS &amp; Touch] 在Sencha(Extjs/Touch)应用程序中使用plugins(插件)和mixins(混入)

    原文链接:http://blog.csdn.net/lovelyelfpop/article/details/50853591 英文原文:Using Plugins and Mixins in You ...