antvjs_国内有哪些好的数据可视化工具推荐一下

『壹』关于图标插件G2(antv) echarts之类的一点问题

1、echarts应培消该和jsp不冲突啊，我见过两个配唤知产品都是jsp+echarts做的链旁

2、查了antv g2的API和例子，不是写死的吧？

『贰』 antv g6 中shape为image时，怎么设置img属性为本地图片啊

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>词云</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://a.alipayobjects.com/g/datavis/g2/2.3.2/g2.js"></script>
</head>
<body>
<div id="c1"></div>
<script src="https://a.alipayobjects.com/g/datavis/g-cloud/1.0.2/index.js"><李改烂/script>
<script>
var Util = G2.Util;
var Shape = G2.Shape;
function getTextAttrs(cfg) {
var textAttrs = Util.mix(true, {}, {
fillOpacity: cfg.opacity,
fontSize: cfg.size,
rotate: cfg.origin._origin.rotate,
text: cfg.origin._origin.text,
textAlign: 'center',
fill: cfg.color,
textBaseline:'Alphabetic'
}, cfg.style);
return textAttrs;
}
// 给point注册一个词云的shape
Shape.registShape('point'歼弊, 'cloud', {
drawShape: function(cfg, container) {
cfg.points = this.parsePoints(cfg.points);
var attrs = getTextAttrs(cfg);
// 给容器添加text类型的shape
// 坐标仍然是原来的坐标
// 文字样式为通过getTextAttrs方法获取的样式
var shape = container.addShape('text', {
attrs: Util.mix(attrs, {
x: cfg.points[0].x,
y: cfg.points[0].y
})
});
return shape;
}
});
//json数据的地址：https://antv.alipay.com/static/data/g2pv.json
$.getJSON('./g2pv.json', function(data) {
data.sort(function(a,b){
return b.pv-a.pv;
});
// 获取数据的最大值和最小哪漏值
var max = data[0].pv;
var min = data[data.length-1].pv;
// 构造一个词云布局对象
var imageCloud = new Cloud({
// 传入数据源
words: data,
// 设定宽高（默认为500*500）
width: 650,
height: 450,
// 设定文字大小配置函数(默认为12-40px的随机大小)
size: function(words){
// 将pv映射到canvas可绘制的size范围14-100(canvas默认最小文字为12px)
return ((words.pv - min)/(max - min)) * (100 - 14) + 14;
},
// 设定文字内容
text: function(words){
// 将网址处理成用'.'分隔开的第一个字符串
var index = words.site.indexOf('.');
var text = words.site;
if(index > 0 && index < words.site.length){
text = words.site.substr(0,index);
// 当字符串是'www'时获取下一个
if(text === 'www'){
text = words.site.substr(index + 1);
index = text.indexOf('.');
text = text.substr(0,index);
}
// 当字符串是数字时获取整个网址
if(/^[0-9]*$/g.test(text)) {
text = words.site;
}
}
return text;
}
});

//图片地址
imageCloud.image("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1185508753,3294372198&fm=23&gp=0.jpg",function(Cloud){
Cloud.exec(function(texts){
var chart = new G2.Chart({
id : 'c1',
// canvas的宽高需要和布局宽高一致
width: 850,
height: 600,
plotCfg : {
margin : 0
}
});
chart.legend(false);
chart.source(texts);
chart.axis(false);
chart.tooltip({
title:false
});
// 将词云坐标系调整为G2的坐标系
chart.coord().reflect();
// 绘制点图，在x*y的坐标点绘制自定义的词云shape，颜色根据text字段进行映射，大小根据size字段的真实值进行映射，文字样式配置为词云布局返回的样式，tooltip显示site*pv两个字段的内容
chart.point().position('x*y').color('text').size('size',function(size){
return size;
}).shape('cloud').style({
fontStyle: texts[0].style,
fontFamily: texts[0].font,
fontWeight: texts[0].weight
}).tooltip('site*pv');
chart.render();

});
});

});
</script>

</body>
</html>

---------------------

『叁』国内有哪些好的数据可视化工具，推荐一下

诚然，数据可视化可谓是数据分析工作的最后一道工序，前面的作业做得再好，如果不能很好地展现出来，那就算是临门一脚、功亏一篑了……下面给大家列出好用的数据可视化工具清单，希望可以为你的学习或工作带来一些帮助。

1、强大的R可视化包-ggplot2

R是一款偏向于统计分析的脚本语言软件，基于S语言开发，如果你是R语言忠实fans，我相信你一定不会不知道R里单独的一个绘图包—ggplot2，之所以给ggplot2“强大”的头衔，一方面确实能够轻松应付各个领域的图像绘制，静态的，动态的，说的出名字的，个性化特制的；另一方面小编就是学统计学的，自然相对熟悉这个包。

ggplot2由Hadley Wickham在2005年创造。受欢迎的原因是将图形分解为语素（如尺度、图层）的思想。ggplot2可以作为R语言基础绘图包的替代，同时ggplot2预设有多种印刷及网页尺寸。

当然有些数据分析软件也带透视表、绘图功能，如MySQL、SPSS，但数据可视化不作为主要功能，这里就不如上面较详细说了。

『肆』使用antv 饼状图锚点样式自定义为如图样式怎么做

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,height=device-height">
<title>饼图-花瓣图</title>
<style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<divid="mountNode"></div>
<script>/*Fixingiframewindow.innerHeight0issueinSafari*/document.body.clientHeight;</script>
<scriptsrc="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script>
vardata=[{
type:'分类一',
value:27
},{
type:'分类二',
value:25
},{
type:'分类三',
value:18
},{
type:'分类四',
value:15
},{
type:'分类五',
value:10
},{
type:'Other',
value:5
}];

//根据比例，获取两点之间的点
functiongetPoint(p0,p1,ratio){
return{
x:(1-ratio)*p0.x+ratio*p1.x,
y:(1-ratio)*p0.y+ratio*p1.y
};
}

varpointRatio=0.7;//设置开始变成圆弧的位置0.7
//可以通过调整这个数值控制分割空白处的间距，0-1之间的数值
varsliceNumber=0.005;

//自定义other的图形，增加两条线
G2.Shape.registerShape('interval','旁明platelet',{
draw:functiondraw(cfg,container){
cfg.points[1].y=cfg.points[1].y-sliceNumber;
运烂告cfg.points[2].y=cfg.points[2].y-sliceNumber;
varcenterPoint={
x:cfg.points[3].x,
y:(cfg.points[2].y+cfg.points[3].y)/2
};
centerPoint=this.parsePoint(centerPoint);
varpoints=this.parsePoints(cfg.points);
varpath=[];
vartmpPoint1=getPoint(points[0],points[3],pointRatio);
vartmpPoint2=getPoint(points[1],points[2],pointRatio);
path.push(['M',points[0].x,points[0].y]);
path.push(['L',tmpPoint1.x,tmpPoint1.y]);
path.push(['Q',points[3].x,points[3].y,centerPoint.x,centerPoint.y]);
path.push(['Q',points[2].x,points[2].y,tmpPoint2.x,tmpPoint2.y]);
历羡path.push(['L',points[1].x,points[1].y]);
path.push(['z']);
returncontainer.addShape('path',{
attrs:{
fill:cfg.color,
path:path
}
});
}
});

varchart=newG2.Chart({
container:'mountNode',
forceFit:true,
height:window.innerHeight,
padding:[40,0]
});

chart.source(data);
chart.coord('theta');
chart.intervalStack().position('value').color('type').shape('platelet').label('type');

chart.render();
</script>
</body>

『伍』 React 中使用 AntV G6

G6 V3.1.0. Github: https://github.com/antvis/g6

G6是一个纯JS库，不与任何框架耦合，也就是可以在任何前端框架中使用，如 React、Vue、Angular 等。由于我们内部绝大多数都是基于 React 技术栈的，所以我们也仅提供一个 G6 在 React 中使用的 Demo。

在 React 中使用 G6，和在 HTML 中使用基本相做瞎同，唯一比较关键的区分就是在实例化 Graph 时，要保纳碧证 DOM 容器渲染完成，并能获取到 DOM 元素。

在 Demo 中，我们以一个简单的流程图为例，实现如下的效果。

Demo 包括以下功能点：

- 自定义节点；

- 自定义边；

- 节点的 tooltip；

- 边的 tooltip；

- 节点上面弹出右键菜单；

- tooltip 及 ContextMenu 如何渲染自定义的 React 组件。

在 React 中，通过 ref.current 获取到真实的 DOM 元素。

import React, {useEffect,useState} from'react';

import ReactDOM from 'react-dom';

import {data} from './data';

import G6 from'@antv/g6';

export default function() {

const ref=React.useRef(null)

let graph=null

useEffect(()=>{

if(!graph) {

graph=newG6.Graph({

container:ref.current,

width:1200,

height:800,

modes: {

default: ['drag-canvas']

},

layout: {

type:'dagre',

direction:'LR'

},

defaultNode: {

shape:'node',

labelCfg: {

style: {

fill:'#000000A6',

fontSize:10

}

},

style: {

stroke:'#72CC4A',

width:150

}

},

defaultEdge:{

shape:'polyline'

}

})

}

graph.data(data)

graph.render()

}, [])

return(<divref={ref}></div> );

}

节点和边的 tooltip、节点上的右键菜单，G6 中内置的很难满足样式上的需求，这个时候我们就可以通过渲染自定义的 React 组件来实现。Tooltip 和 ContextMenu 都是普通的 React 组件，样式完全由用户控制。交互过程中，在G6 中需要做的事情就是确定何时渲染组件，以及渲染到何处。在 G6 中获取到是否渲染组件的标识值和渲染位置后，这些值就可以使用 React state 进行管理，后续的所有工作就全部由 React 负责了。

// 边tooltip坐标

const [showNodeTooltip,setShowNodeTooltip]=useState(false)

const [nodeTooltipX,setNodeToolTipX]=useState(0)

const[nodeTooltipY,setNodeToolTipY]=useState(0)

// 监听node上面mouse事纯茄空件

graph.on('node:mouseenter',evt=>{

const {item}=evt

const model=item.getModel()

const {x,y}=model

const point=graph.getCanvasByPoint(x,y)

setNodeToolTipX(point.x-75)

setNodeToolTipY(point.y+15)

setShowNodeTooltip(true)

})

// 节点上面触发mouseleave事件后隐藏tooltip和

ContextMenugraph.on('node:mouseleave', ()=>{

setShowNodeTooltip(false)

})

return (<divref={ref}>{showNodeTooltip&&<NodeTooltipsx={nodeTooltipX}y={nodeTooltipY}/>}</div>);

完整的 Demo 源码请👉戳这里。

『陆』钉钉小程序图表库AntV - F2 使用总结

对于图表这块毁扮的开发，使用一些流行的图表库可以大大提高我们的开发效率，目前较为流行的图表库大概有Echarts,Hcharts,AntV,他们都是大同小异，我印象比较深刻的是Hcharts是支持多坐标轴的，Echarts好像是不支持的，但是对于小程序的选择我们选择的是阿里的AntV-f2，因为他明确指出了适合小程序开发，而且AntV-f2除了不支持一些document，其他的大部分纤颂功能都是支持的，我们就没有再考虑其他的库，但是官方并没有太多关于小程序的具体使用文档，我们只能根据js的相关事例翻译成小程序的语法。

钉钉小程序开发工具： https://open-doc.dingtalk.com/microapp/kn6zg7/zunrdk#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7

AntV - F2： https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html

效果看着有点丑对不对......那我们就来实现一下设计师的效果图吧！具体功能：1.默认展示一个tooltip, 2.tooltip改变时展示对应x轴的数据，3.自定义tooltip

我们自定义一个默认的tooltip:, 就叫做def_item吧，当图表渲染完成设置def_item = {key: 100, value: 200},这里有个注意点，就是def_item的内毁余郑容不是随便定义的，这里我们先不做多说，后面会说明这个def_item的key值时如何设置的。

通过查找tooltip的Api我们会发现它有3个事件的回调，在钉钉小程序中我们只能通过props来传递tooltip的回调

优化后的效果

导航:首页 > 编程语言 > antvjs

antvjs

与antvjs相关的资料

友情链接