@bizcharts/other-word-cloud
Version:
Bizhcarts basic charts
83 lines (80 loc) • 3.21 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<script src="//g.alicdn.com/bizcharts/io-asserts/3.1.2/react16.0.0.production.min.js"></script>
<script src="//g.alicdn.com/bizcharts/io-asserts/3.1.2/react-dom16.0.0.production.min.js"></script>
<script src="//unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/bizcharts@3.2.2/umd/BizCharts.min.js"> </script>
<script type="text/javascript" src="https://gw.alipayobjects.com/as/g/datavis/assets/1.0.1/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//gw.alipayobjects.com/os/antv/assets/data-set/0.8.6/data-set.min.js"></script>
<script type="text/javascript" src="https://gw.alipayobjects.com/as/g/datavis/assets/1.0.1/lodash-4.17.4.min.js"></script>
</head>
<body>
<div id="mountNode" ></div>
<script type="text/babel">
const { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape } = window.BizCharts;
function getTextAttrs(cfg) {
return _.assign({}, {
fillOpacity: cfg.opacity,
fontSize: cfg.origin._origin.size,
rotate: cfg.origin._origin.rotate,
text: cfg.origin._origin.text,
textAlign: 'center',
fontFamily: cfg.origin._origin.font,
fill: cfg.color,
textBaseline: 'Alphabetic'
}, cfg.style);
}
// 给point注册一个词云的shape
Shape.registerShape('point', 'cloud', {
drawShape(cfg, container) {
const attrs = getTextAttrs(cfg);
return container.addShape('text', {
attrs: _.assign(attrs, {
x: cfg.x,
y: cfg.y
})
});
}
});
$.getJSON('./mock.json', data => {
const dv = new DataSet.View().source(data);
const range = dv.range('value');
const min = range[0];
const max = range[1];
dv.transform({
type: 'tag-cloud',
fields: ['x', 'value'],
size: [window.innerWidth, window.innerHeight],
font: 'Verdana',
padding: 0,
timeInterval: 5000, // max execute time
rotate() {
let random = ~~(Math.random() * 4) % 4;
if (random == 2) {
random = 0;
}
return random * 90; // 0, 90, 270
},
fontSize(d) {
if (d.value) {
return ((d.value - min) / (max - min)) * (80 - 24) + 24;
}
return 0;
}
});
const scale={
x: {nice: false},
y: {nice: false}
}
ReactDOM.render((
<Chart height={window.innerHeight} width={window.innerWidth} data={dv} scale={scale} padding={0} forceFit>
<Tooltip showTitle={false} />
<Coord reflect="y" />
<Geom type='point' position="x*y" color="category" shape='cloud' tooltip='value*category' />
</Chart>
), document.getElementById("mountNode"));
});
</script>
</body>
</html>