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相關的資料

友情鏈接