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. softmax回归---sigmoid（1）

    介绍softmax之前先讲讲sigmoid: 逻辑回归模型常用的函数:sigmoid函数(用来做二分类) 表达式:f(x)=L/(1+exp-k(x-x0)) 其图像: 本质:将一个真值映射到(0,1 ...

  2. java环境搭建心得

     右击此电脑,点击属性, 在打开的电脑系统对话框里发电机i直接点击左侧导航里的[高级系统设置]在打开的电脑系统属性对话框里直接点击下面的[环境变量] 打开环境变量对话框后,直接点击系统变量下面的新建, ...

  3. 论vue项目api相关代码的组织方式

    论vue项目api相关代码的组织方式 看了下项目组同事的代码,发现不同项目有不同的组织版本 版本一: ├─apis │ a.api.js │ b.api.js │ b.api.js │ d.api.j ...

  4. BZOJ 1101 Luogu P3455 POI 2007 Zap (莫比乌斯反演+数论分块)

    手动博客搬家: 本文发表于20171216 13:34:20, 原地址https://blog.csdn.net/suncongbo/article/details/78819470 URL: (Lu ...

  5. SBC37x交叉编译平台QT+OPENCV

    一.构建交叉编译器 [随机手册]Angstrom是一个界面友好的嵌入式发行版本,用亍手持设备,机顶盒和网络存储设备等嵌入式设备. 光盘的文件系统是定制的The Angstrom Distributio ...

  6. hdu 4858 容器的简单模拟

    我用临接表模拟容器超时 #include<stdio.h> #include<string.h> #include<vector> using namespace ...

  7. 0316 【案例】MySQL count操作优化案例一则

      转自http://blog.itpub.net/22664653/viewspace-1791124/ 一 背景 某业务的数据库定期报 thread_runing 飙高,通定位发现一个慢查询sql ...

  8. 【日常学习】【搜索/递归】codevs2802 二的幂次方题解

    转载请注明出处 [ametake版权全部]http://blog.csdn.net/ametake欢迎来看 题目描写叙述 Description 不论什么一个正整数都能够用2的幂次方表示. 比如:13 ...

  9. POJ 2762 Going from u to v or from v to u?(强联通，拓扑排序)

    id=2762">http://poj.org/problem?id=2762 Going from u to v or from v to u? Time Limit: 2000MS ...

  10. 关系型数据库与HBase的数据储存方式差别

    现在Bigtable型(列族)数据库应用越来越广,功能也非常强大. 可是非常多人还是把它当做关系型数据库在使用,用原来关系型数据库的思维建表.存储.查询. 本文以hbase举例讲述数据模式的变化. 传 ...