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. Day7 字符串和常用数据结构

    字符串和常用数据结构 使用字符串 第二次世界大战促使了现代电子计算机的诞生,当初的想法很简单,就是用计算机来计算导弹的弹道,因此在计算机刚刚诞生的那个年代,计算机处理的信息主要是数值,而世界上的第一台 ...

  2. esp32（M5STACK）程序烧写（Ubuntu）

    由于我们的开发环境在Ubuntu上,所以介绍一下如何在Ubuntu上烧写esp32的程序 首先下载esptools   pip install esptool           擦除 sudo es ...

  3. 【maven】成功生成jar包，提示找不到主类？

    问题描述:   使用maven构建zookeeper项目,完成一个简单的创建组的实例,代码调试完成,使用mvn clean install成功打包得到了jar包,但是在执行时发现使用java -cp ...

  4. 1、springboot+mybatis+zookeeper+dubbox+maven+pagehelper

    一.创建普通的maven的web项目 2.配置KD42WF_Part1下的pom.xml <?xml version="1.0" encoding="UTF-8&q ...

  5. C# 通过反射为一个对象赋值

    /// <summary>   /// 反射赋值   /// </summary>   public class ObjectReflection   {       publ ...

  6. SPOJ 1812 LCS2 - Longest Common Substring II (后缀自动机、状压DP)

    手动博客搬家: 本文发表于20181217 23:54:35, 原地址https://blog.csdn.net/suncongbo/article/details/85058680 人生第一道后缀自 ...

  7. Spring 属性输入和实例化操作_总结

    Spring 之 applicationContext.xml  配置 默认实例化(无参构造) //被实例化对象 package cn.ibbidream.Bean; public class Bea ...

  8. Windows 2003 IIS 不支持ASP的问题

    Windows 2003 IIS 不支持ASP的问题 问题: HTTP 错误 404 - 文件或目录未找到. Internet 信息服务 (IIS) 第一步,启用Asp,进入:控制面板 -> 管 ...

  9. Optimization on content service with local search in cloud of clouds

    曾老师的这篇文章发表于Journal of Network and Computer Applications,主要解决的是利用启发式算法决定如何在cloud of clouds中进行副本分发,满足用 ...

  10. 先验概率 vs 后验概率

    其实还不是很懂.看了这篇文章: http://blog.csdn.net/passball/article/details/5859878   事情还没有发生,要求这件事情发生的可能性的大小,是先验概 ...