什么是詞云圖？

詞云圖，也叫文字云，是對網(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è)置。

其返回值的類型如下：

• timeInterval: 設(shè)置繪制程序最大的執(zhí)行時間，單位毫秒，如果時間設(shè)置過短可能會只繪制一部分詞語。

• meta: 全局化配置圖表數(shù)據(jù)元信息，以字段為單位進(jìn)行配置，來定義數(shù)據(jù)的類型和展示方式。在 meta 上的配置將同時影響所有組件的文本信息。

關(guān)于 meta 的更多配置項，請查看 Meta Options

圖形樣式屬性

• imageMask：

設(shè)置一張圖片，然后圖表就可以根據(jù)該圖片的形狀進(jìn)行渲染，可以是圖片元素實例或者 url 地址和 base64。注意： 詞語只渲染在圖片的深色部位，淺色的部位（如白色）不渲染詞語。當(dāng)使用圖片的 url 地址時，圖片的大小不宜過大，不然圖片加載時間過長。

例子如下：

圖片地址如下

例子效果如下：

• wordStyle :設(shè)置每個詞語的樣式。

以上，某些屬性可以設(shè)置為一個函數(shù)，其函數(shù)的參數(shù)如下：

類型Word的配置如下：

• 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打個廣告，真她娘的好用