Title
How to display a word cloud on top of the outer container?
Description
We have a relatively small scene displaying word clouds, hoping to make the word cloud fill the entire container as much as possible. I tried the official website, but it seems that it cannot fill the container
Solution
This is because in VChart, the word cloud is defaulted to use 'circle ' circular markShape mask graphics, if you want to fill the container as much as possible, you can use 'rect' shape.
Code example
const spec = {
type: 'wordCloud',
nameField: 'Keyword',
valueField: 'Score',
data: {
name: 'baseData',
values: [ { "Keyword": "预期寿命", "Score": 0.8571 }, { "Keyword": "心率", "Score": 0.8571 }, { "Keyword": "疾病", "Score": 0.7597 }, { "Keyword": "心跳快慢", "Score": 0.5714 }, { "Keyword": "心跳", "Score": 0.5714 }, { "Keyword": "郭艺芳", "Score": 0.5624 }, { "Keyword": "陈清勇", "Score": 0.5624 }, { "Keyword": "风险因素", "Score": 0.4874 }, { "Keyword": "心动过速", "Score": 0.4874 }, { "Keyword": "寿命", "Score": 0.3849 }, { "Keyword": "快慢", "Score": 0.3844 }, { "Keyword": "生活习惯", "Score": 0.2857 }, { "Keyword": "河北省人民医院", "Score": 0.2857 }, { "Keyword": "四川大学华西医院", "Score": 0.2186 }, { "Keyword": "华西医院", "Score": 0.2121 }, { "Keyword": "阿尔茨海默病", "Score": 0.2067 }, { "Keyword": "人群", "Score": 0.1984 }, { "Keyword": "痴呆", "Score": 0.19 }, { "Keyword": "研究", "Score": 0.1761 }, { "Keyword": "健康", "Score": 0.1754 }, { "Keyword": "习惯", "Score": 0.1709 }, { "Keyword": "医院", "Score": 0.1664 }, { "Keyword": "风险", "Score": 0.1647 }, { "Keyword": "心内科", "Score": 0.16 }, { "Keyword": "生活", "Score": 0.158 }, { "Keyword": "工作", "Score": 0.1554 }, { "Keyword": "心血管疾病", "Score": 0.1299 }, { "Keyword": "咖啡", "Score": 0.0974 }, { "Keyword": "志飞", "Score": 0.0974 }, { "Keyword": "中国妇女报", "Score": 0.0974 }, { "Keyword": "人民医院", "Score": 0.0913 } ]
},
maskShape: 'rect',
width: 400,
height: 300,
background: '#cccc',
padding: 10
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;</br>
Results show
