Question

尝试使用wordcloud2.js库为wordcloud创建一个dashing.io小部件 https://github.com/timdream/wordcloud2.js

我无法使用咖啡脚本将数据传递到仪表板。

从下面的位置下载javascript文件并将其放在assets文件夹中 https://github.com/timdream/wordcloud2.js/tree/master/src 以下是wordcloud.rb的代码库： -

 companybuzzwords = "{ list : [['Paradigm shift',10], ['Leverage',8], ['Pivoting',4], ['Turn-key',4], ['Streamlininess',4], ['Exit strategy',4], ['Synergy',4], ['Enterprise',4], ['Web 2.0',4]] }"

SCHEDULER.every '2s' do
  puts "$$$$$$$ TOP LEVEL SUMMARY:-- #{companybuzzwords}"
  send_event('companiescloud', { words: companybuzzwords })
end

wordcloud.coffee的代码： -

  class Dashing.Wordcloud extends Dashing.Widget

  ready: ->
    @container1 = $(@node).find(".mycanvas")[0]
    console.log @container1
    @data = @get('words')
    console.log @data
    @WordCloud = WordCloud @container1, @data

  onData: (data) ->
    if @WordCloud
      @container1 = $(@node).find(".mycanvas")[0]
      @data = @get('words')
      @WordCloud = WordCloud @container1, @data

wordcloud.html的代码： -

<h1 class="title" data-bind="title"></h1>    
<div id="mycanvas" class="mycanvas"></div>

wordcloud.scss的代码： -

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
//$background-color:  #fb9618;
$background-color:  #e7e7e7;

// ----------------------------------------------------------------------------
// Widget-WordCloud styles
// ----------------------------------------------------------------------------
.widget-wordcloud {

  background-color: $background-color;
  position: relative;

  .title {
    position: absolute;
    top: 5px;
    left: 0px;
    right: 0px;
    color: #000000;
    font-weight: bold;
  }

  .mycanvas {
    display: block;
    position: relative;
    overflow: hidden;
  }


}

在您的仪表板中添加从github下载的javascript库并运行仪表板

<script type="text/javascript" src="/assets/wordcloud2.js"></script>
<li data-row="1" data-col="1" data-sizex="3" data-sizey="3">
  <div data-id="companiescloud" data-view="Wordcloud" data-title="Hello"></div>
</li>

非常感谢任何帮助。

Answer 1

我看到一个问题，即.js的路径。如果你看一下console.log，它应该抱怨.js的路径

而不是这个

<script type="text/javascript" src="/assets/wordcloud2.js"></script>

将脚本放入＆＃34; public / wordcloud2.js＆＃34;并从那条路径引用它，因为那条

运行起来

<script type="text/javascript" src="wordcloud2.js"></script>

试试这个，看看它是否有任何区别

使用WordCloud2.js库的WordCloud Dashing.io小部件

1 个答案: