昆明網(wǎng)站建設(shè)公司排名有利于seo優(yōu)化的是
什么是詞云圖?
詞云圖,也叫文字云,是對網(wǎng)絡(luò)文本中出現(xiàn)頻率較高的“關(guān)鍵詞”予以視覺上的突出,出現(xiàn)越多,顯示的字體越大,越突出,這個關(guān)鍵詞也就越重要。讓瀏覽者通過詞云圖一眼就可以快速感知最突出的文字,迅速抓住重點,了解主旨。
詞云圖的應(yīng)用?
下面這張圖是CSDN每天值得看的統(tǒng)計詞云,從圖上我們可以清楚的看到每種技術(shù)在每天在CSDN上發(fā)布的權(quán)重,這樣就能大致了解每日用戶的關(guān)注點,以便給用戶推送更有價值的內(nèi)容。

如何實現(xiàn)詞云圖?
今天我們介紹用Ant Design Charts去實現(xiàn)詞云圖的效果,更多圖表類展示請參考Ant Design Charts
本次演示是基于react框架,用Ant Design Pro 創(chuàng)建腳手架工程來實現(xiàn)的,如何創(chuàng)建項目請參考以下鏈接Ant Design Pro入門

數(shù)據(jù)映射屬性
data: 設(shè)置圖表數(shù)據(jù)源。數(shù)據(jù)源為對象集合,例如:[{ time: '1991',value: 20 }, { time: '1992',value: 20 }]。
wordField: 單詞內(nèi)容在數(shù)據(jù)中所對應(yīng)的字段名。
weightField: 單詞所占權(quán)重在數(shù)據(jù)中所對應(yīng)的字段名。
colorField: 根據(jù)該字段進(jìn)行顏色映射.
random: 自定義所使用的隨機(jī)函數(shù),其值可以是一個 [0, 1) 區(qū)間中的值,也可以是一個返回該值的函數(shù),當(dāng)該值是一個固定的值時,每次渲染相同數(shù)據(jù)的詞云圖時,其對應(yīng)的每個單詞的布局坐標(biāo)一致。默認(rèn)配置: 默認(rèn)使用的是瀏覽器內(nèi)置Math.random,也就是每次渲染,單詞的位置都不一樣。
spiral: 當(dāng)設(shè)置為 archimedean 時,整個詞云圖接近于橢圓的形狀,當(dāng)設(shè)置為 rectangular 時,整個詞云圖接近于矩形的形狀。
placementStrategy: 自定義每個詞語的坐標(biāo),返回值必須包含 x 和 y 屬性,其余的可選。也可以在 wordStyle 中的選項中設(shè)置。
其返回值的類型如下:
細(xì)分配置 | 類型 | 功能描述 |
x | number | 當(dāng)前文本的橫向坐標(biāo) |
y | number | 當(dāng)前文本的縱向坐標(biāo) |
font | string | 文本的字體 |
weight | *number | string* |
size | numberg | 文本的字體大小 |
rotate | numberg | 文本的旋轉(zhuǎn)角度 |
timeInterval: 設(shè)置繪制程序最大的執(zhí)行時間,單位毫秒,如果時間設(shè)置過短可能會只繪制一部分詞語。
meta: 全局化配置圖表數(shù)據(jù)元信息,以字段為單位進(jìn)行配置,來定義數(shù)據(jù)的類型和展示方式。在 meta 上的配置將同時影響所有組件的文本信息。
細(xì)分配置項名稱 | 類型 | 功能描述 |
alias | string | 字段的別名 |
formatter | function | callback 方法,對該字段所有值進(jìn)行格式化處理 |
values | string[] | 枚舉該字段下所有值 |
range | number[] | 字段的數(shù)據(jù)映射區(qū)間,默認(rèn)為[0,1] |
關(guān)于 meta 的更多配置項,請查看 Meta Options
圖形樣式屬性
imageMask:
設(shè)置一張圖片,然后圖表就可以根據(jù)該圖片的形狀進(jìn)行渲染,可以是圖片元素實例或者 url 地址和 base64。注意: 詞語只渲染在圖片的深色部位,淺色的部位(如白色)不渲染詞語。當(dāng)使用圖片的 url 地址時,圖片的大小不宜過大,不然圖片加載時間過長。
例子如下:

圖片地址如下

例子效果如下:

wordStyle :設(shè)置每個詞語的樣式。
細(xì)分配置 | 類型 | 默認(rèn)值 | 功能描述 |
fontFamily | *string | function* | 'Verdana' |
fontWeight | *string | number | function* |
padding | *number | function* | 1 |
fontSize | *number[] | number | function* |
rotation | *number[] | number | function* |
rotationSteps | number | 2 | 旋轉(zhuǎn)實際的步數(shù),越大可能旋轉(zhuǎn)角度越小, 默認(rèn)是 2 |
以上,某些屬性可以設(shè)置為一個函數(shù),其函數(shù)的參數(shù)如下:
細(xì)分配置 | 類型 | 功能描述 |
word | Word | 每個文本的數(shù)據(jù)對象 |
index | number | 當(dāng)前文本對象在總數(shù)據(jù)中的索引值 |
words | Word[] | 總的文本數(shù)據(jù),是一個數(shù)組 |
類型Word的配置如下:
細(xì)分配置 | 類型 | 功能描述 |
text | string | 文本內(nèi)容 |
value | number | 文本權(quán)重 |
color | any | 進(jìn)行顏色映射的值 |
datum | object | 存儲的所對應(yīng)的原始數(shù)據(jù) |
color:
指定點的顏色。如沒有配置 colorField,指定一個單值即可。對 colorFiled 進(jìn)行了配置的情況下,即可以指定一系列色值,也可以通過回調(diào)函數(shù)的方法根據(jù)對應(yīng)數(shù)值進(jìn)行設(shè)置。
默認(rèn)配置:采用 theme 中的色板。
// 設(shè)置單一顏色{color:'#a8ddb5'}// 設(shè)置多色{colorField:'type',// 部分圖表使用 seriesFieldcolor:['#d62728','#2ca02c','#000000'],}// Function{colorField:'type',// 部分圖表使用 seriesFieldcolor:({ type })=>{if(type ==='male'){return'red';}return'yellow';}}
代碼實現(xiàn)詞云圖
新建 index.txt
import React, { useState, useEffect } from 'react';
import { WordCloud } from '@ant-design/plots';const date=[{ "value": 10, "name": "Java" },{ "value": 8, "name": "Docker" },{ "value": 8, "name": "Mysql" },{ "value": 8, "name": "SpringBoot" },{ "value": 8, "name": "SpringCloud" },{ "value": 8, "name": "Go" },{ "value": 8, "name": "Css" },{ "value": 8, "name": "JavaScript" },{ "value": 6, "name": "Grammar" },{ "value": 6, "name": "Graphics" },{ "value": 6, "name": "Graph" },{ "value": 6, "name": "Hierarchy" },{ "value": 6, "name": "Labeling" },{ "value": 6, "name": "Layout" },{ "value": 6, "name": "Quantitative" },{ "value": 6, "name": "Relation" },{ "value": 6, "name": "Statistics" },{ "value": 6, "name": "可視化" },{ "value": 6, "name": "數(shù)據(jù)" },{ "value": 6, "name": "數(shù)據(jù)可視化" },{ "value": 4, "name": "流量統(tǒng)計" },{ "value": 4, "name": "聯(lián)系人管理" },{ "value": 4, "name": "Canvas" },{ "value": 4, "name": "Chart" },{ "value": 4, "name": "DAG" },{ "value": 4, "name": "DG" },{ "value": 4, "name": "Facet" },{ "value": 4, "name": "Geo" },{ "value": 4, "name": "Line" },{ "value": 4, "name": "MindMap" },{ "value": 4, "name": "Pie" },{ "value": 4, "name": "Pizza Chart" },{ "value": 4, "name": "Punch Card" },{ "value": 4, "name": "SVG" },{ "value": 4, "name": "Sunburst" },{ "value": 4, "name": "Tree" },{ "value": 4, "name": "UML" },{ "value": 3, "name": "Chart" },{ "value": 3, "name": "View" },{ "value": 3, "name": "Geom" },{ "value": 3, "name": "Connector" },{ "value": 3, "name": "Transform" },{ "value": 3, "name": "Util" },{ "value": 3, "name": "DomUtil" },{ "value": 3, "name": "MatrixUtil" },{ "value": 3, "name": "PathUtil" },{ "value": 3, "name": "G" },{ "value": 3, "name": "2D" },{ "value": 3, "name": "3D" },{ "value": 3, "name": "Line" },{ "value": 3, "name": "Area" },{ "value": 3, "name": "Interval" },{ "value": 3, "name": "Schema" },{ "value": 3, "name": "Edge" },{ "value": 3, "name": "Polygon" },{ "value": 3, "name": "Heatmap" },{ "value": 3, "name": "Render" },{ "value": 3, "name": "Tooltip" },{ "value": 3, "name": "Axis" },{ "value": 3, "name": "Guide" },{ "value": 3, "name": "Coord" },{ "value": 3, "name": "Legend" },{ "value": 3, "name": "Path" },{ "value": 3, "name": "Helix" },{ "value": 3, "name": "Theta" },{ "value": 3, "name": "Rect" },{ "value": 3, "name": "Polar" },{ "value": 3, "name": "Dsv" },{ "value": 3, "name": "Csv" },{ "value": 3, "name": "Tsv" },{ "value": 3, "name": "GeoJSON" },{ "value": 3, "name": "TopoJSON" },{ "value": 3, "name": "Filter" },{ "value": 3, "name": "Map" },{ "value": 3, "name": "Pick" },{ "value": 3, "name": "Rename" },{ "value": 3, "name": "Filter" },{ "value": 3, "name": "Map" },{ "value": 3, "name": "Pick" },{ "value": 3, "name": "Rename" },{ "value": 3, "name": "Reverse" },{ "value": 3, "name": "sort" },{ "value": 3, "name": "Subset" },{ "value": 3, "name": "Partition" },{ "value": 3, "name": "Imputation" },{ "value": 3, "name": "Fold" },{ "value": 3, "name": "Aggregate" },{ "value": 3, "name": "Proportion" },{ "value": 3, "name": "Histogram" },{ "value": 3, "name": "Quantile" },{ "value": 3, "name": "Treemap" },{ "value": 3, "name": "Hexagon" },{ "value": 3, "name": "Binning" },{ "value": 3, "name": "kernel" },{ "value": 3, "name": "Regression" },{ "value": 3, "name": "Density" },{ "value": 3, "name": "Sankey" },{ "value": 3, "name": "Voronoi" },{ "value": 3, "name": "Projection" },{ "value": 3, "name": "Centroid" },{ "value": 3, "name": "H5" },{ "value": 3, "name": "Mobile" },{ "value": 3, "name": "K線圖" },{ "value": 3, "name": "關(guān)系圖" },{ "value": 3, "name": "燭形圖" },{ "value": 3, "name": "股票圖" },{ "value": 3, "name": "直方圖" },{ "value": 3, "name": "金字塔圖" },{ "value": 3, "name": "分面" },{ "value": 3, "name": "南丁格爾玫瑰圖" },{ "value": 3, "name": "餅圖" },{ "value": 3, "name": "線圖" },{ "value": 3, "name": "點圖" },{ "value": 3, "name": "散點圖" },{ "value": 3, "name": "子彈圖" },{ "value": 3, "name": "柱狀圖" },{ "value": 3, "name": "儀表盤" },{ "value": 3, "name": "氣泡圖" },{ "value": 3, "name": "漏斗圖" },{ "value": 3, "name": "熱力圖" },{ "value": 3, "name": "玉玦圖" },{ "value": 3, "name": "直方圖" },{ "value": 3, "name": "矩形樹圖" },{ "value": 3, "name": "箱形圖" },{ "value": 3, "name": "色塊圖" },{ "value": 3, "name": "螺旋圖" },{ "value": 3, "name": "詞云" },{ "value": 3, "name": "詞云圖" },{ "value": 3, "name": "雷達(dá)圖" },{ "value": 3, "name": "面積圖" },{ "value": 3, "name": "馬賽克圖" },{ "value": 3, "name": "盒須圖" },{ "value": 3, "name": "坐標(biāo)軸" },{ "value": 3, "name": "" },{ "value": 3, "name": "Jacques Bertin" },{ "value": 3, "name": "Leland Wilkinson" },{ "value": 3, "name": "William Playfair" },{ "value": 3, "name": "關(guān)聯(lián)" },{ "value": 3, "name": "分布" },{ "value": 3, "name": "區(qū)間" },{ "value": 3, "name": "占比" },{ "value": 3, "name": "地圖" },{ "value": 3, "name": "時間" },{ "value": 3, "name": "比較" },{ "value": 3, "name": "流程" },{ "value": 3, "name": "趨勢" },{ "value": 2, "name": "亦葉" },{ "value": 2, "name": "再飛" },{ "value": 2, "name": "完白" },{ "value": 2, "name": "巴思" },{ "value": 2, "name": "王琣浩" },{ "value": 2, "name": "御術(shù)" },{ "value": 2, "name": "有田" },{ "value": 2, "name": "沉魚" },{ "value": 2, "name": "玉伯" },{ "value": 2, "name": "畫康" },{ "value": 2, "name": "禎逸" },{ "value": 2, "name": "絕云" },{ "value": 2, "name": "羅憲" },{ "value": 2, "name": "陸沉" },{ "value": 2, "name": "顧傾" },{ "value": 2, "name": "首頁" },{ "value": 2, "name": "GPL" },{ "value": 2, "name": "PAI" },{ "value": 2, "name": "SPSS" },{ "value": 2, "name": "SYSTAT" },{ "value": 2, "name": "Tableau" },{ "value": 2, "name": "D3" },{ "value": 2, "name": "Vega" },{ "value": 2, "name": "統(tǒng)計圖表" }]
export default (props:any) => {const [data, setData] = useState(date);useEffect(() => {setData(date)}, []);const config = {// 設(shè)置圖表數(shù)據(jù)源。數(shù)據(jù)源為對象集合,// 例如:[{ time: '1991',value: 20 }, { time: '1992',value: 20 }]。data,// 單詞內(nèi)容在數(shù)據(jù)中所對應(yīng)的字段名。wordField: 'name',// 單詞所占權(quán)重在數(shù)據(jù)中所對應(yīng)的字段名。weightField: 'value',// 根據(jù)該字段進(jìn)行顏色映射。colorField: 'name',// 設(shè)置每個詞語的樣式。wordStyle: {fontFamily: 'Verdana',fontSize: [8, 32],rotation: 0,},// 返回值設(shè)置成一個 [0, 1) 區(qū)間內(nèi)的值,// 可以讓每次渲染的位置相同(前提是每次的寬高一致)。random: () => 0.5,};return (<><WordCloud {...config} /></>);
};
代碼說明:data為手動設(shè)置的靜態(tài)話數(shù)據(jù),正常需求從后端去獲取,之所以和官網(wǎng)上的代碼寫法不一樣完全是本人習(xí)慣。接下來我們看頁面效果;

順便給Ant Design Pro打個廣告,真她娘的好用