npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wywordcloud

v0.1.6

Published

wy word cloud dp

Downloads

7

Readme

说明

  • 基于 js2wordcloud, wordcloud2 进行修改来满足 项目需求, 进一步使用可以 了解 js2wordcloud, wordcloud2
  • 添加 图形背景 isShowBackShape 控制是否显示图形背景
  • 解决 文字和图形(请使用2倍图)不清晰问题 div(包含canvas父类,设置zoom:0.5)
  • 类似nuxtjs 工程中 引用图片 用 require 不然路径会用问题 例如:imageShape: require('~/static/womanIcon.png')
  • 不是黑色的背景 用 imageShapeColor , 需要imageShapeColor 和 imageShape 形状一样, imageShape 必传(需要背景的情况)

Installation

  • npm安装:
npm install wywordcloud --save

Usage

 <div style="zoom:0.5" id="container"></div>
import wywordcloud from 'wywordcloud';
var wc = new wywordcloud(document.getElementById('container'))
wc.setOption({
    tooltip: {
        show: true
    },
    list: [['谈笑风生', 80], ['谈笑风生', 80], ['谈笑风生', 70], ['谈笑风生', 70], ['谈笑风生', 60], ['谈笑风生', 60]],
    color: '#15a4fa'
})

Features

  • 支持tooltip。包括tooltip的开关和数据格式化formatter;
  • 支持showLoading和hideLoading加载数据loading;
  • 支持resize;
  • 当词云数值相差过大时,对字体大小范围进行约束;
  • 更好地支持图片形状。

Document

常用参数:

(1)data:词云生成数据,包含具体词语以及频率;

(2)size:字体大小,默认为1,一般来说该值越小,生成的形状轮廓越明显;

(3)fontFamily:字体,如‘微软雅黑’;

(4)fontWeight:字体粗细,包含‘normal’,‘bold’以及‘600’;;

(5)color:字体颜色,可以选择‘random-dark’以及‘random-light’,其实就是颜色色系,也可以使用 回调函数 对每个词语 进行颜色选择 callback(word, weight, fontSize, distance, theta);

(6)backgroundColor:背景颜色,支持R语言中的常用颜色,如‘gray’,‘blcak’,但是还支持不了更加具体的颜色选择,如‘gray20’;

(7)minRontatin与maxRontatin:字体旋转角度范围的最小值以及最大值,选定后,字体会在该范围内随机旋转;

(8)rotationRation:字体旋转比例,如设定为1,则全部词语都会发生旋转;

(9)shape:词云形状选择,默认是‘circle’,即圆形。还可以选择‘cardioid’(苹果形或心形),‘star’(星形),‘diamond’(钻石),‘triangle-forward’(三角形),‘triangle’(三角形),‘pentagon’(五边形)

API

  • setOption(options)

    options必须通过此API进行设置,才能显示词云

    在wordcloud2.js原options基础上增加:

    {
        // ...
        imageShape: 'https://example.com/images/shape.png',     // 提供一张图片,根据其形状进行词云渲染,默认为null
        imageShapeColor: 'https://example.com/images/shape.png',   // 提供一张图片,根据其形状进行词云渲染,不是黑色的背景
        fontSizeFactor: 0.1,                                    // 当词云值相差太大,可设置此值进字体行大小微调,默认0.1
        maxFontSize: 60,                                        // 最大fontSize,用来控制weightFactor,默认60
        minFontSize: 12,                                        // 最小fontSize,用来控制weightFactor,默认12
        isShowBackShape: false,                                 // 是否显示背景图形
        tooltip: {
            show: true,                                         // 默认:false
            backgroundColor: 'rgba(0, 0, 0, 0.701961)',         // 默认:'rgba(0, 0, 0, 0.701961)'
            formatter: function(item) {                         // 数据格式化函数,item为list的一项
            }
        },
        noDataLoadingOption: {                                  // 无数据提示。
            backgroundColor: '#eee',
            text: '暂无数据',
            textStyle: {
                color: '#888',
                fontSize: 14
            }
        }
        // ...
    }
  • showLoading([loadingOption])

    过渡控制,显示loading(读取中)。可选。

    loadingOption:

    {
        backgroundColor: '#eee',
        text: '正在加载...',
        effect: 'spin'                      // 默认:null, { String | Function } 可选:'spin|normal';也可为回调函数,回调函数生成HTML
    }
  • hideLoading()

    隐藏loading

  • resize()

    当容器大小变化时,调用此方法进行重绘

Licence

MIT