有没有办法定制交易视图自动收报机小部件？

我在tradeview(https://www.tradingview.com/widget/ticker/)中使用这个小部件,想知道是否有办法:

a)使滚动条滚动(iFrame滚动=是)

b)重新调整小部件的大小.

我之前没有使用过iFrame,也不确定如何进行自定义或者甚至可能进行自定义.

这是一个达到预期效果的答案:https://codepen.io/epsilon42/pen/BPZgjP/

它主要涉及CSS动画的使用,但也有必要添加一些jQuery来克隆,iframe以便在股票代码运行结束时摆脱差距.由于无法操纵iframe跨域的内容,这是我能想到的唯一方法.

我必须删除asyncTradingView脚本才能$( document ).ready正确触发.

另外需要注意的是,根据您在自动收报机中选择的项目数量,有必要更改CSS中的宽度:

.ticker-canvas {
  width: calc((200px * 15) + 2px);
}

15将上述CSS中的值更改为您在脚本中调用的项目数.200px似乎是小部件决定自动删除项目之前可以使用的最小宽度,但是如果需要,使用更高的值似乎没有任何问题.2px是占用小部件任一侧的1px边框.

HTML:

  

  





  
Some text.

CSS:

body {
  margin: 0;
}
.content {
  padding: 10px 20px;
}
.content p {
  font-family: sans-serif;
}

/******/

.ticker-container {
  width: 100%;
  overflow: hidden;
}

.ticker-canvas {
  width: calc((200px * 15) + 2px);
  /* 
  200px = minimum width of ticker item before widget script starts removing ticker codes
  15 = number of ticker codes
  2px = accounts for 1px external border
  */
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker-canvas;
  animation-name: ticker-canvas;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
}
.ticker-canvas:hover {
  animation-play-state: paused
}

@-webkit-keyframes ticker-canvas {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker-canvas {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.tradingview-widget-container {
  position: relative;
}
.tradingview-widget-container iframe {
    position: absolute;
    top: 0;
}
.tradingview-widget-container iframe:nth-of-type(2) {
  left: 100%;
}

JS:

$( document ).ready(function() {
  $( ".tradingview-widget-container iframe" ).clone().appendTo( ".tradingview-widget-container" );
});

你有一个错误的问题,因为这个错误的答案.正确的问题如下:

如何滚动交易视图自动收报机小部件？

我...想知道是否有办法:

使滚动条滚动(iFrame滚动=是)

重新调整小部件的大小.

是的,可以使用滚动条滚动和小部件的重新调整大小,但我们不需要这样做iFrame scrolling=yes.

而不是这个,我们iframe用a div和resize滚动这个div元素.换句话说,您可以在交易视图自动收报机小部件网站上找到此信息:

描述说我可以使用Ticker Widget显示最多15个符号.为什么我只看到5？

Ticker小部件默认使用Autosize参数.这意味着它接受父元素的宽度.我们的演示页面足够宽,只显示5个符号.您应该使父元素更宽以查看所有符号.

代码示例

function resizeWidget()
{
    var cOntainerTradingview= document.querySelector('#container-tradingview');
    containerTradingview.style.maxWidth = '630px';
}

  



    

    

        
            Quotes
         by TradingView