<!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. 修改mysql默认字符集的方案

    mysql默认字符集能否进行修改呢?答案是肯定的,下面就将教您两种修改mysql默认字符集的方法,希望对您学习mysql默认字符集方面能有所启迪. (1) 最简单的修改方法,就是修改mysql的my. ...

  2. Python 元组知识点

    1.元组是一个有序的集合,2.元组和列表一样可以使用索引.切片来取值.3.创建元组后不能在原地进行修改替换等操作.4.元组支持嵌套,可以包含列表.字典和不同元组.5.元组支持一般序列的操作,例如:+. ...

  3. Debian

    一.简介 https://zh.wikipedia.org/wiki/Debian 二.下载 https://www.debian.org/ 三.配置 1)挂载iso镜像 mount /dev/cdr ...

  4. 初学嵌入式STM32基础下选哪款开发板适合学习

    iTOP-4412开发板 目前为止,在用户网盘上已经积累了多达100G以上资料, 这些资料都是和4412相关的,并不是随便拼凑起来的!同时我们也完全开放原厂资料. 鉴于用户对于海量资料无从下手的问题, ...

  5. JVM 运行时数据区域

    Java虚拟机管理的内存包括以下几个运行时数据区域: 1.程序计数器: 程序计数器是一块比较小的内存空间,是当前线程执行的字节码行号指示器.Java多线程是通过线程轮流切换来实现的,所以每个线程都有一 ...

  6. 使用Burpsuite破解Webshell密码

    Burp Suite 是用于攻击web  应用程序的集成平台.它包含了许多工具,并为这些工具设计了许多接口,以促进加快攻击应用程序的过程.所有的工具都共享一个能处理并显示HTTP  消息,持久性,认证 ...

  7. python中如何将str转换成dict

    >>>user "{'a':'b'}" >>>b = eval(user) >>>b {'a':'b'}

  8. Django项目中如何建表？怎样导入数据？

    http://django-chinese-docs.readthedocs.org/en/latest/topics/db/models.html 通常在项目中的models.py文件中建表的 Th ...

  9. UESTC 883 方老师与两个串 --二分搜索+DP

    CF原题 由题可知,n,m太大,无法开出dp[n][m]的数组. 观察发现s/e最大为300,也就是说,选用第一种操作的次数不会超过300. 于是定义dp[i][j],第一个串的前i个数,使用了j次第 ...

  10. localStroage的用法

    Cookie 每个域名存储量比较小(各浏览器不同,大致4K) 所有域名的存储量有限制(各浏览器不同,大致4K) 有个数限制(各浏览器不同) 会随请求发送到服务器 LocalStorage 永久存储 单 ...