【前言】最近项目中用到了Tradingview中的K线图，基于以前从未使用过，写此篇文章记录一下Tradingview的使用。 【目标】
1 会使用Tradingview中k线图的渲染方式 2 了解一些基本的用法
一 简介
Tradingview是一个价格图表和分析软件，提供免费和付费选项，为优秀的交易技术分析金融图表，拥有丰富的技术指标库，并拥有可以直接交易的交易终端插件。
1 数据绑定
graph LR
A[图表 - JSAPI] --> B[UDF适配器]
A --> C[自定义适配器]
B -- UDF Get--> D[server]
C --> D
D -- UDF JSON --> B
JSAPI是必须的 适配器可以根据需要进行选择
二 基本方法
大致的将Tradingview使用分为了如下3部分
1 引入Tradingview
html
<script type="text/javascript" src="charting_library/charting_library.min.js"></script>
<script type="text/javascript" src="datafeeds/udf/dist/polyfills.js"></script>
<script type="text/javascript" src="datafeeds/udf/dist/bundle.js"></script>
2 创建图表数据
Datafeeds.Container = function () {
//this._configuration=configurationData
this._configuration = {
supports_search: true,
supports_group_request: false,
exchanges: [
// 交易所DV 交易所名称NYSE 交易所描述DeVry Education Group Inc.
{ value: "DV", name: "NYSE", desc: "DeVry Education Group Inc." },
],
supported_resolutions: ["1", "15", "D", "M"],
//布尔值来标识您的 datafeed 是否支持在K线上显示标记。
supports_marks: false,
// 将此设置为true,若datafeed提供服务器时间（unix时间）。它仅用于在价格刻度上显示倒计时。
supports_time: false,
//布尔值来标识您的 datafeed 是否支持时间刻度标记。
supports_timescale_marks: false,
symbols_types: [{ name: "Ny", value: "dv" }],
};
};
- supports_search 是否支持搜索
- supports_group_request 是否支持搜索或品种解析
- exchanges 交易所数组，里面的value表示交易所code，name表示交易所名称，desc表示交易所描述
- symbolsTypes 品种所属类型，可属于多个类型
- supported-resolutions 支持的周期数组，周期可以是数字或字符串
如果周期是一个数字，它被视为分钟数。 字符串可以是“*D”，“*W”，“_M”（_的意思是任何数字) 1代表1分钟，15代表15分钟 D代表天day，W代表周week，M代表月； 2D是两天；3W是三周；6M是6个月
// onReady 此方法旨在提供填充配置数据的对象。这些数据会影响图表的行为表现
Datafeeds.Container.prototype.onReady = function (callback) {
let that = this;
getChartData();
if (this._configuration) {
setTimeout(function () {
callback(that._configuration);
}, 0);
}
};
// getBar 当图表库需要由日期范围定义的历史K线片段时，将调用此函数。
Datafeeds.Container.prototype.getBars = function (
symbolInfo,
resolution,
dataFrom,
dataTo,
onHistoryCallback
) {
//历史数据的回调函数。每次请求只应被调用一次。 此函数有2个参数：
onHistoryCallback(dataBar);
};
// 模拟数据
function getChartData() {
var time = 1528404420000;
var maxHigh = 8888;
var minLow = 8000;
for (var i = 0; i < 10000; i++) {
var high = maxHigh - Math.floor(Math.random() * 300);
var low = minLow + Math.floor(Math.random() * 300);
var close = high - Math.floor(Math.random() * 500);
var open = low + Math.floor(Math.random() * 500);
var volume = parseInt(Math.random() * 100);
//Bar是具有以下字段的对象：
dataBar.push({
time: time, //number UTC时区的毫秒单位时间戳。time对于日K线的时间应为00:00 UTC(而非交易时段的开始时间)。图表库讲根据商品信息中的交易时段调整时间。每个月K线的时间是该月的第一个交易日，且无时间部分。
close: close, //number K线收盘价
open: open, //number K线开盘价
high: high, //number K线最高价
low: low, //number K线最低价
volume: volume, //number K线交易量
});
time += 2000000;
}
}
通过商品名称解析商品信息
Datafeeds.Container.prototype.resolveSymbol = function (
symbolName,
onSymbolResolvedCallback,
onResolveErrorCallback
) {
onSymbolResolvedCallback({
name: "D",
timezone: "Asia/Shanghai",
pricescale: 500,
minmov: 1,
ticker: "D",
description: "DIdontKnow",
session: "24x7",
type: "bitcoin",
has_intraday: true,
intraday_multipliers: ["1", "30", "D"],
has_weekly_and_monthly: false,
has_no_volume: false,
regular_session: "24x7",
});
};
return new Datafeeds.Container();
}
symbolName: string，商品名称 或ticker onSymbolResolvedCallback: function(SymbolInfo) onResolveErrorCallback: function(reason) extension: 具有附加参数的可选对象。 它具有以下字段： currencyCode: string, 如果设置了currency_codes配置字段并且在原始商品信息中提供了currency_code，则可以提供它来表示要转换的货币。 unitId: string. 如果 units 配置，它可以被提供来指示要转换的单位。 设置字段并在商品信息中提供 unit_id 。
3 widget构造图表
TradingView.onready(function () {
console.log('----',chart_data)
var chart = (window.tvWidget = new TradingView.widget({
symbol: "d", // 品类
height: "900", // widget的尺寸
width: "1700", // widget的尺寸
interval: "D", // 日线 D - 1天
toolbar_bg: "#c5c5c8", // 工具栏背景颜色
timezone: "Asia/Shanghai", // 图表的初始时区
// 图表的初始时间范围
time_frames: [
{ text: "1y", resolution: "1W" },
{ text: "6m", resolution: "3D" },
{ text: "3m", resolution: "1D" },
{ text: "1m", resolution: "1D" },
{ text: "1w", resolution: "30" },
{ text: "3d", resolution: "30" },
{ text: "1d", resolution: "30" },
{ text: "6h", resolution: "15" },
{ text: "1h", resolution: "1" },
{ text: "100y", resolution: "W", description: "All", title: "All" },
],
container_id: "tv_chart_container", // 带有图表的 iframe 将被放置在其中
library_path: "charting_library/", // static文件夹的路径
locale: "zh", // 图表库的本地化处理
// UDF 模拟数据
//datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com"),
// 需要显示的JSON数据内容
datafeed: chart_data,
disabled_features: [
//'',// 成交量与k线分离
],
overrides: {
volumePaneSize: "small", //成交量高度设置，可选值 large, medium, small, tiny
},
}));
});
三 其它属性参数
1 禁用
将需要禁用的属性写到disabled_features数组中
disabled_features: [
// "use_localstorage_for_settings", //是否缓存配置
"header_symbol_search",
"header_compare",
"symbol_search_hot_key",
"compare_symbol",
"symbol_info",
"go_to_date",
"timeframes_toolbar",
// "header_resolutions",
// "control_bar",
// "edit_buttons_in_legend",
// "hide_left_toolbar_by_default",
// "hide_last_na_study_output",
// "remove_library_container_border",
// "dont_show_boolean_study_arguments",
// "header_widget_dom_node",
// "header_saveload",
// "legend_widget",
// "main_series_scale_menu",
// "hide_left_toolbar_by_default",
// "show_right_widgets_panel_by_default",
// "side_toolbar_in_fullscreen_mode",
// "right_toolbar",
// "remove_library_container_border", "hide_last_na_study_output", "dont_show_boolean_study_arguments", "hide_left_toolbar_by_default",
// "save_chart_properties_to_local_storage",
// "volume_force_overlay",
"left_toolbar", //左侧工具栏
// "header_saveload"
// "control_bar",
// "context_menus",
// "study_buttons_in_legend",
// "study_dialog_search_control",
"header_widget" // 顶部工具栏
],
