hightcharts-vue 蜡烛图股票绘图 candlestick

main.js文件：import HighchartsVue from "highcharts-vue"
import Highcharts from "highcharts"
import stockInit from "highcharts/modules/stock"
import mapInit from 'highcharts/modules/map'stockInit(Highcharts)
mapInit(Highcharts)
Vue.use(HighchartsVue)Kchart组件中：
<template><div id="kChart"><highcharts class="stock" :constructor-type="'stockChart'" :options="stockOptions"></highcharts></div></template><script>import Highcharts from "highcharts";export default {name: "kChart",props: {kChartData: Array  //父组件传过来的值（因为每分钟要请求，所以采用watch监听）},data() {return {stockOptions: {global: {useUTC: false},rangeSelector: {selected: 2},series: [{type: "candlestick",   //数据展示蜡烛图data: "",}],chart: {backgroundColor: "#17223E",   //整个绘图区域背景},tooltip: {split: true},colors: ["#616DA0"],rangeSelector: {enabled: false,buttons: [{type: 'hour',count: 1,text: '1h'}],inputEnabled: false, selected: 2},scrollbar: {enabled: false},navigator: {enabled: false},credits: {enabled: false},tooltip: {shared: true,useHTML: true,headerFormat: "<small>{point.key}</small><table>",pointFormat: '<tr><td style="color: {series.color}" colspan="2">当前秒 </td></tr></br>' +'<tr><td>开盘:</td><td style="text-align: right">{point.open}</td></tr></br>' +'<tr><td>最高:</td><td style="text-align: right">{point.high}</td></tr></br>' +'<tr><td>最低:</td><td style="text-align: right">{point.low}</td></tr></br>' +'<tr><td>收盘:</td><td style="text-align: right">{point.close}</td></tr>',footerFormat: "</table>",valueDecimals: 2},plotOptions: {             //蜡烛图颜色candlestick: {color: "#33AA11",upColor: "#DD2200",lineColor: "#33AA11",upLineColor: "#DD2200"}},xAxis: {type: 'datetime',tickInterval: 36e5 / 60, // 1分钟   //刻度线步伐minRange: 36e5 / 60,labels: {format: '{value: %M:%S}',align: 'center',rotation: -30},lineColor: "#21335B",minorTickColor: "#21335B",tickColor: "#21335B",labels: {style: {color: "#5272B0"},}},yAxis: [{gridLineWidth: "0px",tickWidth: "0px",labels: {enabled: false}}]}};},methods: {getData() {}},mounted() {this.getData();},watch: {kChartData(newValue, oldValue) {this.stockOptions.series[0].data = newValue;let date = newValue.map((e, i) => {return e[0];});this.date = date;let ohlc = [];let dataLength = newValue.length;for (let i = 0; i < dataLength; i += 1) {ohlc.push([newValue[i][0], // 时间戳newValue[i][1], // 开盘价newValue[i][2], // 最高价newValue[i][3], // 最低价newValue[i][4] // 收盘价]);}}}};</script>

hightcharts-vue 蜡烛图股票绘图 candlestick相关推荐

蜡烛图plotly_Plotly 绘图模块中文指南第1期
[实例简介] Plotly 绘图模块中文指南第1期 z开源量化系列课件 www.zlwang.com 刚开始接触Pot∨? l■■1■D■■1■口简单气泡图设置标记大小和颜色- 气泡图中的悬浮文本 ...
蜡烛图精解Candlestick Charting Explained-- 笔记1
标准线图: 蜡烛图: 阳线是指收盘价高于开盘价的牛市状态,阴线是指收盘价低于开盘价的熊市状态. 九种基本的阴线和阳线状态,考虑所有市场可能性,可扩展为15种不同的蜡烛图(线) 1. 大阳或大阴 ...
Ta-Lib源码解析（三）：蜡烛图指标 (Candlestick Indicator) #（附Python重构代码和示意图）（补充中）
TA_Lib指标目录 3.(蜡烛图指标)Candlestick Indicator 一. 前言二. 单K线模型 CDLBELTHOLD(捉腰带线) CDLCLOSINGMARUBOZU (收盘缺影线 ...
plotly基于dataframe数据绘制股票蜡烛图（Candlestick）
plotly基于dataframe数据绘制股票蜡烛图(Candlestick) # 股票蜡烛图(Candlestick) import plotly as py # 导入plotly库并命名为py i ...
股票 K线图蜡烛图
资料1 日K线图中: 在日K线图中一般白线.黄线.紫线.绿线依次分别表示:5.10.20.60日移动平均线,但这并不是固定的,会根据设置的不同而不同,比如你也可以在系统里把它们设为5.15.30.60 ...
plotly Candlestick函数画带成交量的蜡烛图, 解决周末空缺的问题
plotly 画带成交量的蜡烛图 matplotlib 画股票蜡烛图过于繁琐(尽管后来迁移到了mpl_finance包),后来终于发现plotly有这个包,更简洁,更容易上手(颜值还高). 以下为自己 ...
python蜡烛图预测_python tushare股票K线蜡烛图绘制
序言:学着学着就学到股票图形绘制了,尝试了下,入门蛮简单的,后面就不知道了,现在好像mplfinance更换了新版本,老版本不支持了.以下代码能实现单个股票K线蜡烛图图形输出,不过我用的是tushar ...
蜡烛图plotly_Python数据分析：基于Plotly的动态可视化绘图简介，目录书摘
目录:第1章快速开始 1.1 Plotly简介 1.2 安装与安装环境 1.3 在线初始化 1.4 在线绘图隐私说明 1.5 开始在线绘图 1.6 使用离线绘图库 1.7 参数解读 ...
PyQt5_pyqtgraph股票蜡烛图与常用均线
股票分析常用到的均线有MA5 MA10 MA20 MA30 MA60,本例中会实现在pyqtgraph中显示这些常用均线目录效果代码使用数据效果代码需要用到的包导入,与需要用到的蜡烛控 ...

hightcharts-vue 蜡烛图股票绘图 candlestick

hightcharts-vue 蜡烛图股票绘图 candlestick相关推荐

最新文章

热门文章

hightcharts-vue 蜡烛图 股票绘图 candlestick

hightcharts-vue 蜡烛图 股票绘图 candlestick相关推荐

最新文章

热门文章

hightcharts-vue 蜡烛图股票绘图 candlestick

hightcharts-vue 蜡烛图股票绘图 candlestick相关推荐