Вставить Tradingview в Angular 5

Question

Вставить Tradingview в Angular 5

Я просто копирую функцию из встроенного скрипта ( https://www.tradingview.com/widget/advanced-chart/) в компонент моего приложения Angular 5 и включаю исходный скрипт в angular-cli.json. Однако компонент возвращает ошибку "Не удается найти имя" TradingView "". У кого-то есть предложения?

10

angular tradingview-api trading-view

Источник

user8114696 17 янв '18 в 08:11

2 ответа

Решение

Я знаю, что это немного устарело, но сейчас я просто пробую использовать виджеты TradingView. Это очень помогло. Оказалось, что TradingView находится в процессе изменения способа загрузки своих скриптов виджетов, и я подумал, что могу поделиться тем, как я понял, как сделать повторно используемый компонент как для их старых, так и для новых методов загрузки. Наслаждаться:

Вот внедренная версия (более новая):

 import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';

 @Component( {
   selector: 'rip-trading-view-fundamentals',
   template: `
       <div class="tradingview-widget-container" style="height: 300px;" #containerDiv>
           <div class="tradingview-widget-container__widget"></div>

       </div>
   `,
 } )

 export class TradingViewFundamentalsComponent implements AfterViewInit {

   // allows for loading with any symbol
   @Input() symbol: string = '';
   settings: any = {};
   // id for being able to check for errors using postMessage
   widgetId: string = '';

   // wanted to be able to hide the widget if the symbol passed in was invalid (don't love their sad cloud face)
   @ViewChild( 'containerDiv', { static: false } ) containerDiv: ElementRef;

   constructor( private _elRef: ElementRef ) {
   }

   ngAfterViewInit() {
     // need to do this in AfterViewInit because of the Input
     setTimeout( () => {
       this.widgetId = `${ this.symbol }_fundamnetals`;

       // postMessage listener for handling errors
       if ( window.addEventListener ) {
         window.addEventListener( 'message', ( e: any ) => {
             if ( e && e.data ) {
               console.log( e );
               const payload = e.data;
               // if the frameElementId is from this component, the symbol was no good and we should hide the widget
               if ( payload.name === 'tv-widget-no-data' && payload.frameElementId === this.widgetId ) {
                 this.containerDiv.nativeElement.style.display = 'none';
               }
             }
           },
           false,
         );
       }


       this.settings = {
         symbol: this.symbol,
         colorTheme: 'light',
         isTransparent: false,
         largeChartUrl: '',
         displayMode: 'regular',
         height: 300,
         autosize: true,
         locale: 'en',
       };
       const script = document.createElement( 'script' );
       script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-financials.js';
       script.async = true;
       script.id = this.widgetId;
       script.innerHTML = JSON.stringify( this.settings );
       this.containerDiv.nativeElement.appendChild( script );
       const brandingDiv = document.createElement( 'div' );
       brandingDiv.innerHTML = `
     <div class="tradingview-widget-copyright">
     <a href="https://www.tradingview.com/symbols/${ this.symbol }/" rel="noopener" target="_blank">
     <span class="blue-text">${ this.symbol } Fundamental Data</span></a>
               by TradingView
           </div>
 `;

     } );
   }

 }

А вот более старая версия, через глобальный объект TradingView, который загружает свою библиотеку в ваш index.html:

import { AfterViewInit, Component, ElementRef, HostListener, Input, ViewChild } from '@angular/core';
import { Logger } from '../../helpers/logger.service';

// declaration so Typescript knows about the TradingView object loaded in from index.html
declare const TradingView: any;

@Component( {
  selector: 'rip-trading-view-symbol-overview',
  template: `
      <div #containerDiv id="overview_{{symbol}}" class="tradingview-widget-container" style="height: 300px;"></div>
  `,
} )

export class TradingViewSymbolOverviewComponent implements AfterViewInit {

  chart: any;
  // allows for loading with any symbol and description
  @Input() symbol: string = '';
  @Input() description: string = '';
  // id for being able to check for errors using postMessage
  widgetId: string = '';

  // wanted to be able to hide the widget if the symbol passed in was invalid (don't love their sad cloud face)
  @ViewChild( 'containerDiv', { static: false } ) containerDiv: ElementRef;

  ngAfterViewInit() {
    // need to do this in AfterViewInit because of the Input
    setTimeout( () => {
      this.widgetId = `overview_${ this.symbol }`;

      // postMessage listener for handling errors
      if ( window.addEventListener ) {
        window.addEventListener( 'message', ( e: any ) => {
            if ( e && e.data ) {
              console.log( e );
              const payload = e.data;
              if (
                // if the frameElementId is from this component, the symbol was no good and we should hide the widget
                payload.name === 'tv-widget-no-data' && payload.frameElementId === this.widgetId ) {
                // console.log( 'No data available for the symbol profile widget' );
                this.containerDiv.nativeElement.style.display = 'none';
              }
            }
          },
          false,
        );
      }


      this.chart = new TradingView.MediumWidget( {
        container_id: this.widgetId,
        symbols: [
          [
            this.description,
            this.symbol,
          ],
          // could load more symbols, but we just needed the one at a time for now
          // [
          //   'Google',
          //   'GOOGL',
          // ],
          // [
          //   'Microsoft',
          //   'MSFT',
          // ],
        ],
        id: this.widgetId,
        chartOnly: false,
        // 'width': 1000,
        height: 300,
        autosize: true,
        locale: 'en',
        colorTheme: 'light',
        gridLineColor: '#F0F3FA',
        trendLineColor: '#1b66ae',
        fontColor: '#787B86',
        underLineColor: 'rgba(145,196,242,0.35)',
        isTransparent: false,
      } );
    } );
  }

}

Если у кого-то есть заметки о том, как это можно улучшить, я все слышу, и я надеюсь, что эти решения помогут любому, кто ищет ответы, поскольку их не так много, и хотя TradingView, кажется, довольно быстро отвечает на электронные письма, у них нет любые документы, которые я мог найти на их сайте, чтобы получить такую помощь.

5

Источник

user13441954 30 апр '20 в 18:37

Просто добавь

<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>

в index.html, и он будет работать отлично.

3

Источник

user7676532 25 сен '19 в 10:04

Я добавил скрипты загрузки виджетов в index.html, после
в файле шаблона компонента (html) я оставил только html тэги
в ts-файле компонента:
declare const TradingView: any;
И в ngAfterViewInit() Я положил new TradingView.widget(...) внутри setTimeout

Вот и все! Оно работает.

2

Источник

user8842931 12 июн '19 в 19:29

Хорошо работает с моей реализацией https://stackblitz.com/edit/stack-48296351

1

Источник

user9162349 17 янв '18 в 08:22

Привет, ребята! Другое решение, если эти диаграммы вам необходимы (например, в моем случае), вы можете создать простую серверную часть для своего приложения, используя, например, Flask:

Создайте index.html(app/templates/index.html) с кодом виджета в нем, в init.py (app/init.py):

from flask import Flask, request, render_template
from flask_restful import Resource, Api
from flask_cors import CORS, cross_origin

app = Flask(__name__)
app.config['DEBUG'] = True
CORS(app)

@app.route('/tradingView')
def getChart():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(port=6200)

тогда просто запустите сервер

В вашем компоненте добавьте:

<iframe src="http://127.0.0.1:6200/tradingView" frameborder="0"></iframe>

Это решение требует знаний Python и фляжки, но это настолько просто, насколько это возможно, удачи!

-2

Источник

user13607898 01 июл '20 в 23:54

Другие вопросы по тегам angular tradingview-api trading-view

user8114696 17 янв '18 в 13:30 2018-01-17 13:30 · Accepted Answer · 2018-01-17 13:30

Я нашел способ решить ошибку компиляции, объявив TradingView в компоненте:

declare const TradingView: any;

export class ChartComponent implements AfterViewInit {
ngAfterViewInit() {
   new TradingView.widget({
      'container_id': 'technical-analysis',
      'autosize': true,
      'symbol': this.symbolPair,
      'interval': '120',
      'timezone': 'exchange',
      'theme': 'Dark',
      'style': '1',
      'toolbar_bg': '#f1f3f6',
      'withdateranges': true,
      'hide_side_toolbar': false,
      'allow_symbol_change': true,
      'save_image': false,
      'hideideas': true,
      'studies': [ 
      'MASimple@tv-basicstudies' ],
      'show_popup_button': true,
      'popup_width': '1000',
      'popup_height': '650'
    });
  }
}

Посмотреть:

<div id="technical-analysis"></div>