圆形词云(旋转)TagCanvas

昔有朝歌夜弦之高楼，上有倾城倾国之舞袖。

首先咱们需要一个插件这个插件是jQuery的插件

官方文档英文的[Facepalm]

css 就不往上贴了太多了懒得找
代码是这样的 HTML

div class="cy data-flow"><div class="data-flow-content" data-title="客流标签词云"><!-- 客流标签词云 --><div id="canvas-ifrshb" class="Rotation"><canvas id="canvas-yrieay"><p>Anything in here will be replaced on browsers that support the canvas element</p></canvas></div><div style="display: none" class="data-flow-label" id="tags"><ul></ul></div></div></div>

const update = function () {if (!$('#canvas-yrieay').tagcanvas({textFont: 'Impact,"Arial Black",sans-serif',textColour: '#fff',outlineColour: '#0743EC',reverse: true,textHeight: 16,shape: "sphere",depth: 0.8,decel: 0.99,padding: 0,wheelZoom: true,dragControl: false,fadeIn: 0,freezeActive: false,outlineMethod: "outline",outlineOffset: "5",outlineRadius: "0",outlineThickness: "2",maxSpeed: 0.05,initial: [0.1, -0.2], // 配置旋转速度}, 'tags')) {$('#canvas-yrieay').hide();}
};
const getHtml = function (result: Array) {$('#canvas-yrieay').attr('width', $('#canvas-ifrshb').width());$('#canvas-yrieay').attr('height', $('#canvas-ifrshb').height() - 10);const $label = $('.data-flow-label ul', '#app');const html = getLabels(result);$label.html('');$label.prepend(html);update();
};

圆形词云(旋转)TagCanvas相关推荐

Python实现生成一个单词的圆形词云
效果实现打开IDLE,新建文件singleWord.py import numpy as np import matplotlib.pyplot as plt from wordcloud imp ...
python词云乱码_python词云库wordCloud使用方法详解(解决中文乱码)
文章中的例子主要借鉴wordColud的examples,在文章对examples中的例子做了一些改动. 一.wordColud设计中文词云乱码使用wordColud设计词云的时候可能会产生乱码问题 ...
spark的学习（2）之计算最受欢迎美食种类然后画词云
上一篇文章主要讲的是spark如何进行词频统计,数据集为自己创建的,本篇主要使用上一篇的逻辑在实际应用中进行扩展-计算广州美食中最受欢迎的美食类别,然后把数据画成词云. 本篇是上一篇spark的学习( ...
python 圆形的词云
参考https://blog.csdn.net/qdPython/article/details/108754465 生成圆形MASK 主要思路是用一张矩阵图像来作为mask,其中没有文字的用255, ...
python怎样将文字排成圆形_python之词云设计-圆形图案
效果图: 详细代码: import numpy as np from PIL import Image #图像处理库 from wordcloud import WordCloud import ma ...
R语言︱文本挖掘——词云wordcloud2包
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者看到微信公众号探数寻理中提到郎大为Chif ...
D3临摹作业_分词与词云可视化(西安交大国家艺术基金数据可视化培训第28天)
第十二章分词与词云可视化第一节词云图概念:一种富文本信息可视化技术,通过布局算法用文字大小表示词频,辅以多种颜色,直观的反映词组重要性差异,展示文本关键摘要信息.完整的词云分析包括:分词.词 ...
echart 热搜词云(字符云)的制作以及遇到颜色不会随即变得bug
1.首先要引入字符云的js文件或者下载插件进入echart 官网 ,点下载,扩展插件,找到字符云点进去第一种在vscode npm i echarts-wordcloud引入 import &q ...
【R】生成聊天记录词云
[R]生成聊天记录词云 1.环境搭建安装R和RStudio 安装RTools 包的安装 2.导出聊天记录 3.数据处理导入library 导入聊天记录文件删除一些无用信息行分词为分词词典加入 ...

圆形词云(旋转)TagCanvas

昔有朝歌夜弦之高楼，上有倾城倾国之舞袖。

首先咱们需要一个插件这个插件是jQuery的插件

圆形词云(旋转)TagCanvas相关推荐

最新文章

热门文章