<!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. SqlBulkCopy块拷贝数据时，不履行触发器和束缚 解决办法

    在new SqlBulkCopy时,设置SqlBulkCopyOptions属性即可 SqlBulkCopy bulkCopy = new SqlBulkCopy(ConStr,SqlBulkCopy ...

  2. Linux下shell颜色配置

    颜色配置涉及以下几个地方(本人常用的):命令提示符,文件及目录名显示,echo -e命令 1.颜色值分为前景色和背景色,颜色码值对应关系如下: Front Back Color 黑 红 绿 黄(棕) ...

  3. JS对URL字符串进行编码/解码分析

    一.为什么要进行js编码和解码? 只有字母和数字[0-9a-zA-Z].一些特殊符号“$-_.+!*'(),”[不包括双引号].以及某些保留字,才可以不经过编码直接用于URL. 出现的情况: 网址路径 ...

  4. 【Android Demo】加载.gif格式图片

    Android系统为了节省内存,一般不支持直接显示gif图片,即使你强制设置了,也只会显示图片的第一帧. 这个 Demo 是在网上看到的,是个思路,还是有些局限性,还是记录下,以后研究吧. 1.效果图 ...

  5. floyd算法 青云的机房组网方案（简单）

    青云的机房组网方案(简单) 青云现在要将 nn 个机房连成一个互相连通的网络.工程师小王设计出一个方案:通过在 nn 个机房之间铺设 n-1n−1 条双向的光纤,将所有的机房连接.可以假设数据在两个机 ...

  6. 【转载】eclipse插件安装

    原文:http://blog.csdn.net/dylan619/article/details/46839941 原来的eclipse3.7安装了太多插件后,m2e怎么也安装不成功,因此今天重新下载 ...

  7. HTML设置超链接字体颜色和点击后的字体颜色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 转: __asm__ __volatile__内嵌汇编用法简述

    from: http://www.embedu.org/Column/Column28.htm __asm__ __volatile__内嵌汇编用法简述 作者:刘老师,华清远见嵌入式学院高级讲师,AR ...

  9. 看ImplicitBackwardEulerSparse关于static solve的代码

    当选择static solve的时候,求解的流程如下: 1.获得内力 2.qresidual = 外力-内力,qdelta = qresidual, qdelta的非约束元素赋给bufferConst ...

  10. mysql数据库误删除后的数据恢复操作说明

    在日常运维工作中,对于mysql数据库的备份是至关重要的!数据库对于网站的重要性使得我们对mysql数据的管理不容有失!然后,是人总难免会犯错误,说不定哪天大脑短路了来个误操作把数据库给删除了,怎么办 ...