<!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. 一对一关联查询时使用relation连贯操作查询后，调用getLastSql()方法输出的sql语句

    如题: 一对一关联查询时使用relation连贯操作查询后,调用getLastSql()方法输出的sql语句不是一条关联查询语句. 例如: $list = $db->relation(true) ...

  2. 第九篇 ：微信公众平台开发实战Java版之如何实现自定义分享内容

    第一部分:微信JS-SDK介绍 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统 ...

  3. Super A^B mod C

    Given A,B,C, You should quickly calculate the result of A^B mod C. (1<=A,C<=1000000000,1<=B ...

  4. CocurrentHashMap和Hashtable的区别

    集合类是Java API的核心,但是我觉得要用好它们是一种艺术.我总结了一些个人的经验,譬如使用ArrayList能够提高性能,而不再需要过时的Vector了,等等.JDK 1.5引入了一些好用的并发 ...

  5. 【Javascript Demo】JS获取当前对象大小以及屏幕分辨率等

    效果如下: 代码如下: <html> <head> <title>获取当前对象大小以及屏幕分辨率等</title> <body> <d ...

  6. 彻底解决Spring MVC 中文乱码 问题

    1:表单提交controller获得中文参数后乱码解决方案 注意: jsp页面编码设置为UTF-8 form表单提交方式为必须为post,get方式下面spring编码过滤器不起效果 <%@ p ...

  7. java22 - 1 多线程之 单线程和多线程的图解

  8. HTML5-WebSocket技术学习(1)

    WebSocket是为解决客户端与服务端实时通信而产生的技术. 介绍它是什么的废话不多说了,直接说怎么用: 客户端: 1.创建一个 EventSource 对象 var es = new EventS ...

  9. Android Animation简述

    Android Animation简述 一.动画(Animation)          Android框架提供了两种动画系统:属性动画(Android3.0)和视图动画.同时使用两种动画是可行的,但 ...

  10. Android应用性能优化之使用SparseArray替代HashMap

    HashMap是java里比较常用的一个集合类,我比较习惯用来缓存一些处理后的结果.最近在做一个Android项目,在代码中定义这样一个变量,实例化时,Eclipse却给出了一个 performanc ...