<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

</head>

<body>

    <div id="container" style="height: 400px"></div>

</body>

</html>

<script src="jquery.js"></script>

<script src="https://code.highcharts.com/stock/highstock.js"></script>

<script type="text/javascript">

$(function() {

    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function(data) {

        Highcharts.setOptions({

            lang: {

                rangeSelectorZoom: '分类',

                resetZoom:'重置',

                rangeSelectorFrom: '从',

                rangeSelectorTo: '到',

                months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],

                shortMonths: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],

                weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']

            },

            global: {

                useUTC: false

            }

        });

        // create the chart

        $('#container').highcharts('StockChart', {

            rangeSelector: {

                selected: 0,

                inputDateFormat: '%Y-%b-%e',

                buttons: [{

                    type: 'day',

                    count: 1,

                    text: '日K'

                }, {

                    type: 'all',

                    text: '所有'

                }]

            },

            credits: {

                enabled: false

            },

            title: {

                text: '粤贵银行情K线图'

            },

            tooltip: {

                shared: true,

                useHTML: true,

                headerFormat: '<small>{point.key}</small><table>',

                pointFormat: '<tr><td style="color: {series.color}" colspan="2">{series.name} </td></tr>' +

                    '<tr><td>开盘:</td><td style="text-align: right">{point.open}</td></tr>' +

                    '<tr><td>最高:</td><td style="text-align: right">{point.high}</td></tr>' +

                    '<tr><td>最低:</td><td style="text-align: right">{point.low}</td></tr>' +

                    '<tr><td>收盘:</td><td style="text-align: right">{point.close}</td></tr>',

                footerFormat: '</table>',

                valueDecimals: 2,

                xDateFormat: "%Y.%b.%e,%A"

            },

            plotOptions: {

                candlestick: {//红涨绿跌

                    color: 'green',

                    upColor: 'red'

                }

            },

            xAxis: {//自定义X轴显示格式

                labels: {

                    formatter: function() {

                        var date = new Date(this.value);

                        var month = date.getMonth() + 1;

                        var day = date.getDate();

                        if (month < 10) {

                            month = '0' + month;

                        }

                        if (day < 10) {

                            day = '0' + day;

                        }

                        return month + '.' + day;

                    }

                }

            },

            series: [{

                type: 'candlestick',

                name: '粤贵银',

                data: data,

            }]

        });

    });

});

</script>

Highcharts candlestick(K线图)案例的更多相关文章

  1. 使用ECharts画K线图

    需引入echarts.js插件,开发环境建议选择源代码版本,该版本包含了常见的警告和错误提示.下载地址 http://echarts.baidu.com/download.html 下面是代码,注释很 ...

  2. 百度 echarts K线图使用

    看个效果图先 首先在需要插入图例的HTML中嵌入 <div id="main" style="height:400px"></div> ...

  3. highstock K线图 深入研究

    K线图,相信每个股民都不陌生,如何用SVG画好一个K线图是一个难题. 我选择用highstock做为画图组件,适当的修改了一下源码,参考了数个财经网站的案例,完成了一个不太成熟的K线图,欢迎大家批评指 ...

  4. PHP使用HighChart生成股票K线图详解

    本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29Lo ...

  5. K线图学习

    本博文(适合入门的股民朋友)内容来自网络,股市有风险,入市需谨慎 一.起源 K线图(Candlestick Charts)又称蜡烛图.日本线.阴阳线.棒线等,常用说法是“K线”,起源于日本十八世纪德川 ...

  6. 基于Echarts的股票K线图展示

    发布时间:2018-10-31   技术:javascript+html5+canvas   概述 基于echarts的股票K线图展示,只需引用单个插件,通过简单配置,导入数据,即可实现炫酷复杂的K线 ...

  7. echarts画k线图

    var charset = echarts.init(document.getElementById("k_line")) $.get(k_line.url_A).done(fun ...

  8. WPF中使用amCharts绘制股票K线图

    原文:WPF中使用amCharts绘制股票K线图 本想自己用GDI绘图, 通过数据直接绘制一张蜡柱图, 但觉得这样子的功能比较少, 所以到网上搜索一些能画出K线图的控件. 发现DynamicDataD ...

  9. [python]沪深龙虎榜数据导入通达信的自选板块，并标注于K线图上

    将沪深龙虎榜数据导入通达信的自选板块,并标注于K线图上 原理:python读取前一次处理完的计算5日后涨跌幅输出的csv文件 文件名前加"[paint]" 安照通达信的画图文件和板 ...

随机推荐

  1. 标准sql语句，学习

    标准SQL语句总结标准SQL语句总结,标准SQL语言基本上适用于下面所列出的数据库软件 -------------------------------------------------------- ...

  2. Servlet/JSP-01 Servlet及其生命周期

    一.起步 1.新建一个类继承Servlet接口 public class HelloServlet implements Servlet { @Override public void destroy ...

  3. IP工具类-自己动手做个ip解析器

    IP工具类-自己动手做个ip解析器 一.资料准备 导入依赖包:

  4. mysql管理（一）

    创建数据库,并指定默认字符集和排序规则:help create database;create {database|schema} [if not exists] db_name [character ...

  5. linux硬链接与软链接

    在linux操作系统中的文件数据除了实际的内容外,还会含有文件权限(rwx)与文件属性(owner,group,other等),文件系统通常会将这两部分的数据存放在不同的区块,文件权限与文件属性放置在 ...

  6. mysql sql获取上条插入id，update影响行数

    1.获取上条插入数据 LAST_INSERT_ID(); 2.获取update影响行数. ROW_COUNT(); mysql> UPDATE t -> SET address = 'be ...

  7. [转]PhoneGap使用PushPlugin插件实现消息推送

    本文转自:http://my.oschina.net/u/1270482/blog/217661 http://devgirl.org/2013/07/17/tutorial-implement-pu ...

  8. 第05篇. Tomcat和JDK的内存配置

    站在人群,我毫不起眼:活在世上,我不玩心眼! 没有那么远大的目标,但是也不要把我当成傻子! --胖先生 放在前面要说的话:JVM内存分配设置的参数有四个 -Xmx Java Heap最大值,默认值为物 ...

  9. Jetson TK1刷机+配置Mini PCI-e无线网卡

    最近买了台4K电视,觉得可以当显示器用,但没主机,不知怎的想到了Jetson TK1,于是一冲动买了.因为没网线,而Jetson TK1没有无线网卡,所以也折腾了一番,记录一下,给万一也有像我一样没有 ...

  10. NGUI:HUD Text(头顶伤害漂浮文字)

    HUD Text 很早之前就有闻于NGUI中的HUD Text插件,今天得以尝试,看了会儿官方的文档,楞是没给看明白,官方的ReadMe.txt写的使用方法如下: 官网Usage 1. Attach ...