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. List分组的两种方式

    java8之前List分组 假设有个student类,有id.name.score属性,list集合中存放所有学生信息,现在要根据学生姓名进行分组. public Map<String, Lis ...

  2. PAT_A1152#Google Recruitment

    Source: PAT A1152 Google Recruitment (20 分) Description: In July 2004, Google posted on a giant bill ...

  3. 15.5.2 【Task实现细节】骨架方法的结构

    尽管骨架方法中的代码非常简单,但它暗示了状态机的职责.代码清单15-11生成的骨架方 法如下所示: [DebuggerStepThrough] [AsyncStateMachine(typeof(De ...

  4. 构造函数和初始化表、this指针与常函数、析构函数、拷贝构造与拷贝赋值（day05）

    十四 构造函数和初始化表 ... 初始化表 )语法形式 class 类名{ 类名(形参表):成员变量1(初值),...{} }; )必须要使用初始化表的场景 -->如果有类 类型的成员变量,而该 ...

  5. 使用Selenium爬取网站表格类数据

    本文转载自一下网站:Python爬虫(5):Selenium 爬取东方财富网股票财务报表 https://www.makcyun.top/web_scraping_withpython5.html 需 ...

  6. bpm被攻击事件

    bpm登录不上,服务器是windows2008,从深信服上面设置了ddos每秒钟连接超5000次封锁,阻断后面的IP连接,,深信服DDOS日志没有记录 在bpm服务器上面通过netstat -a查看发 ...

  7. Problem 19

    Problem 19 You are given the following information, but you may prefer to do some research for yours ...

  8. 7.IDEA创建Web项目和Tomcat配置

    IntelliJ IDEA Tomcat配置 详解 Tomcat 7.0 和jdk1.8 一起使用 一.创建web项目 1.1  创建工程 1.2 创建java web项目并创建web.xml文件 1 ...

  9. 1103 N的倍数

    1103 N的倍数  题目来源: Ural 1302 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 一个长度为N的数组A,从A中选出若干个数,使得 ...

  10. 洛谷 P2534 [AHOI2012]铁盘整理

    P2534 [AHOI2012]铁盘整理 题目描述 输入输出格式 输入格式: 共两行.第一行为铁盘个数N(1<=N<=50),第二行为N个不同的正整数,分别为从上到下的铁盘的半径R.(1& ...