<!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. cxf开发Restful Web Services

    一.restful web services rest全称是Representation State Transfer(表述性状态转移).它是一种软件架构风格,只是提供了一组设计原则和约束条件.在re ...

  2. jQuery Form 表单提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  3. ubuntu 添加启动器

    终于搞定了安卓开发环境,不知道折腾了多少次,多少个IDE,解决了一个问题,又冒出一个问题.烦死了,最后关头,都快放弃了,重启电脑,打开 android stuio 编译运行居然陈宫了,没有报错,why ...

  4. [转]用NPOI操作EXCEL－－数据有效性

    本文转自:http://www.cnblogs.com/atao/archive/2009/09/22/1572170.html 在有些情况下(比如Excel引入),我们可能不允许用户在Excel随意 ...

  5. [ZZ]Sign Up for the First-Ever Appium Roadshow on August 20th in New York City

    http://sauceio.com/index.php/2014/07/appium-roadshow-nyc/?utm_source=feedly&utm_reader=feedly&am ...

  6. sql 入门经典（第五版） Ryan Stephens 学习笔记 （第一,二，三,，四，五章）

    SQL - Structured  Query Language (结构化查询语言) 1/ SQL 命令的类型 : 数据定义语言: DDL 数据操作语言: DML 数据查询语言: DQL 数据控制语言 ...

  7. MySQL数据库学习笔记（五）----MySQL字符串函数、日期时间函数

    一.常见字符串函数: 1.CHAR_LENGTH  获取长度(字符为单位) 2.FORMAT  格式化 3.INSERT  替换的方式插入 4.INSTR  获取位置 5.LEFT/RIGHT  取左 ...

  8. Android配置----Android开发环境搭建

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  9. java 21 - 15 新IO流 NIO

    1:JDK4  新IO要了解的类 Buffer(缓冲),Channer(通道) 2:JDK7  要了解的新IO类 Path:与平台无关的路径. Paths:包含了返回Path的静态方法. public ...

  10. php file_get_contents 绕过

    http://www.shiyanbar.com/ctf/1837 想到了经常出现的残留文件问题,于是尝试了一下:index.php~,index.php.bak, $flag='xxx';extra ...