vue中使用TradingView --1 项目创建
这是github上大神之作，https://github.com/webdatavisualdev/vue-tradingviewTradingView k线图的主要demo在 static/custome_scripts/chartmain 里这里我自己导入，放到自己的文件夹中1.新建vue-cli2.把 chartmain放入到static/custorm_scripts里面3.index.h
·
这是github上大神之作，https://github.com/webdatavisualdev/vue-tradingview
TradingView k线图的主要demo在 static/custome_scripts/chartmain 里
这里我自己导入，放到自己的文件夹中
1.新建vue-cli
2.把 chartmain放入到static/custorm_scripts里面
3.index.html 引入 <script src="***">
4.写入配置项代码
/* eslint-disable */
<template>
<div class="hello">
<div id="chart_container" class="f-fill" style="height:800px;"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
mounted: function() {
const this_vue = this;
//this_vue.getChartData();//todo: do odkomentowania na feedzie
// if(window.localStorage.getItem("chart_settings")) //todo: do sprawdzenia w bardziej zaawansowanym stanie
// this_vue.saved_chart = JSON.parse(window.localStorage.getItem("chart_settings"));
this_vue.feed = this_vue.createFeed();
TradingView.onready(function (configurationData) {
this_vue.chart = window.tvWidget = new TradingView.widget({
fullscreen: false,
autosize: true,
symbol:'AAPL',
container_id: "chart_container",
datafeed: this_vue.feed,
library_path: "static/custom_scripts/chart_main/",
locale: "zh",
timezone: 'Etc/UTC', //todo: ustawianie timezone'a po strefie usera
charts_storage_api_version: "1.1",
client_id: 'tradingview.com',
user_id: 'public_user_id',
debug: true,
//loading_screen:{ backgroundColor: "#000000",foregroundColor: "#000000", }//todo:do it
interval: '1',
// timeframe:'',//todo: na koncu
toolbar_bg: "#20334d",
// saved_data: this_vue.savedData,
allow_symbol_change: true,
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"}],
drawings_access: {
type: 'black',
// tools: [{name: "Regression Trend"}]//todo: moje
tools: [{name: "Trend Line", grayed: true}, {name: "Trend Angle", grayed: true}] //todo: bb
},
disabled_features: [
"header_symbol_search",
"header_interval_dialog_button",
"show_interval_dialog_on_key_press",
"symbol_search_hot_key",
"study_dialog_search_control",
"display_market_status",
"header_compare",
"edit_buttons_in_legend",
"symbol_info",
"border_around_the_chart",
"main_series_scale_menu",
"star_some_intervals_by_default",
"datasource_copypaste",
"right_bar_stays_on_scroll",
"context_menus",
"go_to_date",
"compare_symbol",
"border_around_the_chart",
"timezone_menu",
//"header_resolutions",//todo: przetestowac
//"control_bar",//todo: przetestowac
//"edit_buttons_in_legend",//todo: przetestowac
"remove_library_container_border",
],
enabled_features: [
"dont_show_boolean_study_arguments",
"use_localstorage_for_settings",
"remove_library_container_border",
"save_chart_properties_to_local_storage",
"side_toolbar_in_fullscreen_mode",
"hide_last_na_study_output",
"constraint_dialogs_movement",//todo: nie do końca jestem pewien
],
studies_overrides: {
"volume.volume.color.0": "#fe4761",
"volume.volume.color.1": "#3fcfb4",
"volume.volume.transparency": 75,
},
overrides: {
"symbolWatermarkProperties.color": "rgba(0,0,0, 0)",
"paneProperties.background": "#20334d",
"paneProperties.vertGridProperties.color": "#344568",
"paneProperties.horzGridProperties.color": "#344568",
"paneProperties.crossHairProperties.color": "#58637a",
"paneProperties.crossHairProperties.style": 2,
"mainSeriesProperties.style": 9,
"mainSeriesProperties.showCountdown": false,
"scalesProperties.showSeriesLastValue": true,
"mainSeriesProperties.visible": false,
"mainSeriesProperties.showPriceLine": false,
"mainSeriesProperties.priceLineWidth": 1,
"mainSeriesProperties.lockScale": false,
"mainSeriesProperties.minTick": "default",
"mainSeriesProperties.extendedHours": false,
"volumePaneSize": "tiny",
editorFontsList: ["Lato", "Arial", "Verdana", "Courier New", "Times New Roman"],
"paneProperties.topMargin": 5,
"paneProperties.bottomMargin": 5,
"paneProperties.leftAxisProperties.autoScale": true,
"paneProperties.leftAxisProperties.autoScaleDisabled": false,
"paneProperties.leftAxisProperties.percentage": false,
"paneProperties.leftAxisProperties.percentageDisabled": false,
"paneProperties.leftAxisProperties.log": false,
"paneProperties.leftAxisProperties.logDisabled": false,
"paneProperties.leftAxisProperties.alignLabels": true,
// "paneProperties.legendProperties.showStudyArguments": true,
"paneProperties.legendProperties.showStudyTitles": true,
"paneProperties.legendProperties.showStudyValues": true,
"paneProperties.legendProperties.showSeriesTitle": true,
"paneProperties.legendProperties.showSeriesOHLC": true,
"scalesProperties.showLeftScale": false,
"scalesProperties.showRightScale": true,
"scalesProperties.backgroundColor": "#20334d",
"scalesProperties.lineColor": "#46587b",
"scalesProperties.textColor": "#8f98ad",
"scalesProperties.scaleSeriesOnly": false,
"mainSeriesProperties.priceAxisProperties.autoScale": true,
"mainSeriesProperties.priceAxisProperties.autoScaleDisabled": false,
"mainSeriesProperties.priceAxisProperties.percentage": false,
"mainSeriesProperties.priceAxisProperties.percentageDisabled": false,
"mainSeriesProperties.priceAxisProperties.log": false,
"mainSeriesProperties.priceAxisProperties.logDisabled": false,
"mainSeriesProperties.candleStyle.upColor": "#3fcfb4",
"mainSeriesProperties.candleStyle.downColor": "#fe4761",
"mainSeriesProperties.candleStyle.drawWick": true,
"mainSeriesProperties.candleStyle.drawBorder": true,
"mainSeriesProperties.candleStyle.borderColor": "#3fcfb4",
"mainSeriesProperties.candleStyle.borderUpColor": "#3fcfb4",
"mainSeriesProperties.candleStyle.borderDownColor": "#fe4761",
"mainSeriesProperties.candleStyle.wickColor": "#737375",
"mainSeriesProperties.candleStyle.wickUpColor": "#3fcfb4",
"mainSeriesProperties.candleStyle.wickDownColor": "#fe4761",
"mainSeriesProperties.candleStyle.barColorsOnPrevClose": false,
"mainSeriesProperties.hollowCandleStyle.upColor": "#3fcfb4",
"mainSeriesProperties.hollowCandleStyle.downColor": "#fe4761",
"mainSeriesProperties.hollowCandleStyle.drawWick": true,
"mainSeriesProperties.hollowCandleStyle.drawBorder": true,
"mainSeriesProperties.hollowCandleStyle.borderColor": "#3fcfb4",
"mainSeriesProperties.hollowCandleStyle.borderUpColor": "#3fcfb4",
"mainSeriesProperties.hollowCandleStyle.borderDownColor": "#fe4761",
"mainSeriesProperties.hollowCandleStyle.wickColor": "#737375",
"mainSeriesProperties.hollowCandleStyle.wickUpColor": "#3fcfb4",
"mainSeriesProperties.hollowCandleStyle.wickDownColor": "#fe4761",
"mainSeriesProperties.haStyle.upColor": "#3fcfb4",
"mainSeriesProperties.haStyle.downColor": "#fe4761",
"mainSeriesProperties.haStyle.drawWick": true,
"mainSeriesProperties.haStyle.drawBorder": true,
"mainSeriesProperties.haStyle.borderColor": "#3fcfb4",
"mainSeriesProperties.haStyle.borderUpColor": "#3fcfb4",
"mainSeriesProperties.haStyle.borderDownColor": "#fe4761",
"mainSeriesProperties.haStyle.wickColor": "#737375",
"mainSeriesProperties.haStyle.wickUpColor": "#3fcfb4",
"mainSeriesProperties.haStyle.wickDownColor": "#fe4761",
"mainSeriesProperties.haStyle.barColorsOnPrevClose": false,
"mainSeriesProperties.barStyle.upColor": "#3fcfb4",
"mainSeriesProperties.barStyle.downColor": "#fe4761",
"mainSeriesProperties.barStyle.barColorsOnPrevClose": false,
"mainSeriesProperties.barStyle.dontDrawOpen": false,
"mainSeriesProperties.lineStyle.color": "#0cbef3",
"mainSeriesProperties.lineStyle.linestyle": 0,
"mainSeriesProperties.lineStyle.linewidth": 1,
"mainSeriesProperties.lineStyle.priceSource": "close",
"mainSeriesProperties.areaStyle.color1": "#0cbef3",
"mainSeriesProperties.areaStyle.color2": "#0098c4",
"mainSeriesProperties.areaStyle.linecolor": "#0cbef3",
"mainSeriesProperties.areaStyle.linestyle": 0,
"mainSeriesProperties.areaStyle.linewidth": 1,
"mainSeriesProperties.areaStyle.priceSource": "close",
"mainSeriesProperties.areaStyle.transparency": 80
},
custom_css_url: 'chart.css'
});
});
},
methods: {
getChartData: function() {
console.log("GET CHART DATA")
_this = this;
this.$http.get('/api/getChartData', this.parseToSend({ pair: this.currentPair.code }))
.then(response => {
console.log('GET CHART DATA',response.body);
response.body.forEach((order => {
_this.$data.bars.push({
close: Number(order.close),
open: Number(order.open),
high: Number(order.high),
low: Number(order.low),
volume: Number(order.volume),
time: Number(order.time),
})
}))
console.log(_this.$data.bars);
this.log('@@@',response.body);
//this.$data.bars = response.body;
//this.$data.activeOffers = response.body;
//Events.$emit('active-offers', response.body);
},err => {
this.log('err', err);
});
},
changePair: function(){
let this_vue = this;
if(this.chart && this.feed){
this.feed._fireEvent('pair_change');
this.chart.activeChart().resetData();
this.chart.activeChart().setSymbol(this.currency1+":"+this.currency2, function(){
console.log("GOWNO :: proba zmiany",this_vue.currency1,this_vue.currency2);
});
}
},
createFeed: function(){
let this_vue = this;
let Datafeed = {};
Datafeed.DataPulseUpdater = function(datafeed, updateFrequency) {
this._datafeed = datafeed;
this._subscribers = {};
this._requestsPending = 0;
var that = this;
var update = function() {
if (that._requestsPending > 0) {
return;
}
for (var listenerGUID in that._subscribers) {
var subscriptionRecord = that._subscribers[listenerGUID];
var resolution = subscriptionRecord.resolution;
var datesRangeRight = parseInt((new Date().valueOf()) / 1000);
// BEWARE: please note we really need 2 bars, not the only last one
// see the explanation below. `10` is the `large enough` value to work around holidays
var datesRangeLeft = datesRangeRight - that.periodLengthSeconds(resolution, 10);
that._requestsPending++;
(function(_subscriptionRecord) { // eslint-disable-line
that._datafeed.getBars(_subscriptionRecord.symbolInfo, resolution, datesRangeLeft, datesRangeRight, function(bars) {
that._requestsPending--;
// means the subscription was cancelled while waiting for data
if (!that._subscribers.hasOwnProperty(listenerGUID)) {
return;
}
if (bars.length === 0) {
return;
}
var lastBar = bars[bars.length - 1];
if (!isNaN(_subscriptionRecord.lastBarTime) && lastBar.time < _subscriptionRecord.lastBarTime) {
return;
}
var subscribers = _subscriptionRecord.listeners;
// BEWARE: this one isn't working when first update comes and this update makes a new bar. In this case
// _subscriptionRecord.lastBarTime = NaN
var isNewBar = !isNaN(_subscriptionRecord.lastBarTime) && lastBar.time > _subscriptionRecord.lastBarTime;
// Pulse updating may miss some trades data (ie, if pulse period = 10 secods and new bar is started 5 seconds later after the last update, the
// old bar's last 5 seconds trades will be lost). Thus, at fist we should broadcast old bar updates when it's ready.
if (isNewBar) {
if (bars.length < 2) {
throw new Error('Not enough bars in history for proper pulse update. Need at least 2.');
}
var previousBar = bars[bars.length - 2];
for (var i = 0; i < subscribers.length; ++i) {
subscribers[i](previousBar);
}
}
_subscriptionRecord.lastBarTime = lastBar.time;
for (var i = 0; i < subscribers.length; ++i) {
subscribers[i](lastBar);
}
},
// on error
function() {
that._requestsPending--;
});
})(subscriptionRecord);
}
};
if (typeof updateFrequency != 'undefined' && updateFrequency > 0) {
setInterval(update, updateFrequency);
}
};
Datafeed.DataPulseUpdater.prototype.periodLengthSeconds = function(resolution, requiredPeriodsCount) {
var daysCount = 0;
if (resolution === 'D') {
daysCount = requiredPeriodsCount;
} else if (resolution === 'M') {
daysCount = 31 * requiredPeriodsCount;
} else if (resolution === 'W') {
daysCount = 7 * requiredPeriodsCount;
} else {
daysCount = requiredPeriodsCount * resolution / (24 * 60);
}
return daysCount * 24 * 60 * 60;
};
Datafeed.DataPulseUpdater.prototype.subscribeDataListener = function(symbolInfo, resolution, newDataCallback, listenerGUID) {
this._datafeed._logMessage('Subscribing ' + listenerGUID);
if (!this._subscribers.hasOwnProperty(listenerGUID)) {
this._subscribers[listenerGUID] = {
symbolInfo: symbolInfo,
resolution: resolution,
lastBarTime: NaN,
listeners: []
};
}
this._subscribers[listenerGUID].listeners.push(newDataCallback);
};
Datafeed.DataPulseUpdater.prototype.unsubscribeDataListener = function(listenerGUID) {
this._datafeed._logMessage('Unsubscribing ' + listenerGUID);
delete this._subscribers[listenerGUID];
};
Datafeed.Container = function(updateFrequency){
this._configuration = {
supports_search: false,
supports_group_request: false,
supported_resolutions: ['1', '3', '5', '15', '30', '60', '120', '240', '360', '720', '1D', '3D', '1W', '1M'],
supports_marks: true,
supports_timescale_marks: true,
exchanges: ['myExchange']
};
this._barsPulseUpdater = new Datafeed.DataPulseUpdater(this, updateFrequency || 10 * 1000);
// this._quotesPulseUpdater = new Datafeed.QuotesPulseUpdater(this);
this._enableLogging = true;
this._callbacks = {};
this._initializationFinished = true;
this._fireEvent('initialized');
this._fireEvent('configuration_ready');
};
Datafeed.Container.prototype._fireEvent = function(event, argument) {
if (this._callbacks.hasOwnProperty(event)) {
var callbacksChain = this._callbacks[event];
for (var i = 0; i < callbacksChain.length; ++i) {
callbacksChain[i](argument);
}
this._callbacks[event] = [];
}
};
Datafeed.Container.prototype._logMessage = function(message) {
if (this._enableLogging) {
var now = new Date();
console.log("CHART LOGS: "+now.toLocaleTimeString() + '.' + now.getMilliseconds() + '> ' + message);
}
};
Datafeed.Container.prototype.on = function(event, callback) {
if (!this._callbacks.hasOwnProperty(event)) {
this._callbacks[event] = [];
}
this._callbacks[event].push(callback);
return this;
};
Datafeed.Container.prototype.onReady = function(callback) {
let that = this;
if (this._configuration) {
setTimeout(function() {
callback(that._configuration);
}, 0);
}
else {
this.on('configuration_ready', function() {
callback(that._configuration);
});
}
};
Datafeed.Container.prototype.resolveSymbol = function(symbolName, onSymbolResolvedCallback, onResolveErrorCallback) {
this._logMessage("GOWNO :: resolve symbol "+ symbolName);
Promise.resolve().then(() => {
function adjustScale(){
if(this_vue.last_price>1000)
return 100;
else
return 100000000;
}
this._logMessage("GOWNO :: onResultReady inject "+'AAPL');
onSymbolResolvedCallback({
"name": 'AAPL',
"timezone": "Europe/Warsaw",
"pricescale": adjustScale(),
"minmov": 1,
"minmov2": 0,
"ticker": 'AAPL',
"description": "",
"session": "24x7",
"type": "bitcoin",
"exchange-traded": "myExchange",
"exchange-listed": "myExchange",
"has_intraday": true,
"intraday_multipliers": ['1'], //It is an array containing intraday resolutions (in minutes) the datafeed wants to build by itself. E.g., if the datafeed reported he supports resolutions ["1", "5", "15"], but in fact it has only 1 minute bars for symbol X, it should set intraday_multipliers of X = [1]. This will make Charting Library to build 5 and 15 resolutions by itself.
"has_weekly_and_monthly": false,
"has_no_volume": false,
"regular_session": "24x7"
});
})
};
Datafeed.Container.prototype.getBars = function(symbolInfo, resolution, rangeStartDate, rangeEndDate, onDataCallback, onErrorCallback) {
if (rangeStartDate > 0 && (rangeStartDate + '').length > 10) {
throw new Error(['Got a JS time instead of Unix one.', rangeStartDate, rangeEndDate]);
}
onDataCallback([], { noData: true });
//onDataCallback(bars, { noData: true , nextTime: data.nb || data.nextTime });
};
Datafeed.Container.prototype.subscribeBars = function(symbolInfo, resolution, onRealtimeCallback, listenerGUID, onResetCacheNeededCallback) {
this_vue.bars.forEach(function (bar) { // in subscribeBars
onRealtimeCallback(bar)
});
this.on('pair_change', function() {
onResetCacheNeededCallback();
});
//this._barsPulseUpdater.subscribeDataListener(symbolInfo, resolution, onRealtimeCallback, listenerGUID, onResetCacheNeededCallback);
};
Datafeed.Container.prototype.unsubscribeBars = function(listenerGUID) {
this._barsPulseUpdater.unsubscribeDataListener(listenerGUID);
};
return new Datafeed.Container;
},
adjustChart: function(){
let chart_iframe = $("#chart_container").find("iframe");
let chart_top = chart_iframe.contents().find(".header-chart-panel");
let chart_top_container = chart_iframe.contents().find(".header-chart-panel-content");
let chart_bottom = chart_iframe.contents().find(".date-range-wrapper");
chart_bottom.appendTo(chart_top_container);
}
},
watch:{
pair: function(newVal, oldVal){
this.currency1= newVal[0];
this.currency2= newVal[1];
this.changePair();
},
},
data: function () {
return {
currency1: 'USD',
currency2: 'BTC',
saved_chart: null,
chart: null,
feed: null,
last_price:1234.2365,
bars: [
{
time:1528404360000,
close:7669.91,
open:7669.91,
high:7668.5,
low:7668.5,
volume:0.337617
}, {
time:1528404420000,
close:7655.46,
open:7661.3,
high:7653,
low:7657.5,
volume:6.204326
}
]
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
5.ok npm rund dev
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献28条内容
所有评论(0)