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

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>

将脚本放在“public/wordcloud2.js”中并从该路径中引用它，因为破折号会从该路径中运行

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

试试这个，看看有什么不同