HighCharts 图表插件 自定义绑定 时间轴数据

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

时间: 2024-10-13 00:52:31

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

生成时间轴数据, 从当前 年月日 往前推到几天的日期(前一周时间、、、)

/** * 生成时间轴数据, 从当前 年月日 往前推到几天的日期 * @param year * @param month * @param dd * @param qian 前几天的日期 * @return yyyyMMdd */ public static String genTimeAxisData4LastDayOfMonthAsStr_2(int year,int month,int dd,int qian){ int day=dd-qian+1; if(day<1){ month-=

jQuery HighchartsTableHTML表格转Highcharts图表插件

版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highcharts中文网所有,除非得到允许,不允许以任何形式转载! 一.关于(About) 1.简介 HighchartsTable是一款基于jQuery编写的HTML表格转换Highcharts图表的插件.利用它,你只需要关注HTML表格配置即可创建Highcharts图表! 2.运行原理 Highcha

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

Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表. Highcharts是一个非常流行,界面美观的纯Javascript图表库.它主要包括两个部分:Highcharts和Highstock.  Highcharts可以为您的网站或Web应用程序提供直观,互动式的图表.目前支持线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型.  H

【jQuery】兼容IE6的图表插件Highcharts

在网页中有时候需要画出统计图,尤其是一些OA系统中,这样能够给各位看官一个直观的数据显示.图表用很多东西都能画出来,比如JSP可以利用JAVA本身就有的绘图函数,php有jpgraph插件,具体请看<[php]使用jpgraph完成投票系统的普通用户部分>(点击打开链接),等等,但毕竟属于现实层的内容,还是用前端插件更好一点.网上的JavaScript/jQuery图标插件到处东西,但是试过JS charts还是觉得Highcharts图表插件最好.因为它兼容IE6.其它不兼容IE6的东西太先

时间轴插件完善,大事记清晰美观

经过前几次产品版本的发本,每次看到写的升级日志就头大,所以这里就利用时间轴插件实现一下这个升级日志的记录,方便查看!好啦,直接上代码: /** * 初始化时间轴数据展示 * * @param {} data 时间轴数据对象 */ function initTimeAxis(data){ var timeAxisHtml = '<h1 class="title">' + data.name + '</h1>'; $.each(data.items,function

数据图表插件Echarts(一)

一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化

Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcharts#yAxis.tickmarkPlacement Highcharts属性与Y轴数据值刻度显示Y轴最小最大值 Highcharts.setOptions({global:{useUTC : false}}); $(function(){ //声明报表对象 var chart = new Hig

highcharts.js的时间轴折线图

工作中正好用到. 鼠标按住左键 左右移动可以试试 <!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts曲线图之时间轴折线图</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1

将Highcharts图表数据生成Table表格

有的时候,我们不仅仅需要漂亮的统计图来显示统计结果,还需要在统计图下方一个表格可以更加直观的展现各类数据.既然统计图都显示出来了,那我们可以根据统计图的各元素生成表格了. 首先,先显示统计图. Html----通过一个查询按钮,根据查询条件,查询满足条件的数据,显示到统计图中. <a onclick="Query();" >查询</a><center>   <div id="chartPro" style="wid