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. Testbench文件编写纪要（Verilog）

    之前在使用Verilog做FPGA项目中.以及其他一些不同的场合下,零散的写过一些练手性质的testbench文件,开始几次写的时候,每次都会因为一些基本的东西没记住.写的很不熟练,后面写的时候稍微熟 ...

  2. 洛谷P1316 丢瓶盖【二分+递推】

    陶陶是个贪玩的孩子,他在地上丢了A个瓶盖,为了简化问题,我们可以当作这A个瓶盖丢在一条直线上,现在他想从这些瓶盖里找出B个,使得距离最近的2个距离最大,他想知道,最大可以到多少呢? 输入输出格式 输入 ...

  3. [luogu4158 SCOI2009] 粉刷匠(dp)

    传送门 Solution 把状态都记上暴力转移即可 Code //By Menteur_Hxy #include <queue> #include <cmath> #inclu ...

  4. 不用form怎么post数据

    数据传输是用户交互中最重要的环节,下面收集了几个数据传输的方法,作为记录(未测试,在使用之前需要测试,如果后面我测试了,会对已测试项进行标注) 一． 网址传递 <a href=”test.php ...

  5. List集合中把其中一个元素 调整到集合的第一位

    要求:现在想把集合中的某个元素,放到该集合的第一个位置,但是其他元素的顺序不需要管. 方法:需要遍历集合,找到这个元素在集合中的位置,然后使用Collections.swap(list,o,i) (O ...

  6. linux下的mongodb数据库原生操作

    mongodb,是一种结构最像mysql的nosql mysql中的数据库,mongodb中也有,区别在于, myql中数据库下的是表,字段和数据的形式存在 mongodb数据库下的是叫集合(和pyt ...

  7. [bzoj3062][Usaco13Feb]Taxi_贪心

    Taxi bzoj-3062 Usaco13Feb 题目大意:有n个奶牛想坐出租车.第i头奶牛在起点a[i]等候,想坐出租车到b[i].Bessie从0出车,车上只能坐一头奶牛.她必须完成所有奶牛的要 ...

  8. String 经常用法最优算法实现总结 （一）

    <pre name="code" class="java"><span style="font-family: Arial, Hel ...

  9. [Angular] Increasing Performance by using Pipe

    For example you make a function to get rating; getRating(score: number): string { let rating: string ...

  10. JS经常使用表单验证总结

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...