Axure引用Antv-G2

本文分为5个模块：引用模版、说明---引用模版、说明---antv-g2图表示例代码、axure引用步骤、示例代码

引用模版：

javascript:
var script = document.createElement('script');
script.type = "text/javascript";
script.src ="https://unpkg.com/@antv/g2/dist/g2.min.js";
document.head.appendChild(script);

setTimeout(() => {
var dom =$('[data-label=arr]').get(0);

      【antv-g2源代码】

}, 2500);

 

说明---引用模版

1、js文件包地址可在antv-g2官网-文档-开始使用中获得。地址：https://g2.antv.antgroup.com/manual/introduction/getting-started

2、每引用一个新的js文件，都需要以下四句代码。其中var表示表示申明变量，var后的script表示变量名，不同的js文件需要不同的变量名。

3、setTimeout函数表示在指定时间后调用函数，2500表示在2.5秒后调用函数。时长太短，可能导致 js文件 未完成加载，导致不能正常展示图表，可根据实际情况做调整。

4、()=>可以用function（）替代。

 

说明---antv-g2图表示例代码

1、顶部引入代码需删除，如：import { Chart } from '@antv/g2'。

2、const（常量声明） 需要修改为var（变量声明）。

3、所有注释需要删除，或者修改为/* */的方式。

4、“ var chart = new Chart ” 需要修改为“ var chart = new G2.Chart ”。

 5、“ container: 'container', ” 需要修改为 “ container: data, ”。

 

axure引用步骤

1、拖入矩形，并用非中文命名（本命名代码中需要使用），矩形设置不要填充色（不然会覆盖图表）

2、按需设置交互，如：载入时打开链接 →链接到“链接到URL或文件路径” → 点击【fx】

3、在弹窗中，将代码全部复制到【插入变量或函数】文本框

 

示例代码（可直接使用）

javascript:
var script = document.createElement('script');
script.type = "text/javascript";
script.src ="https://unpkg.com/@antv/g2/dist/g2.min.js";
document.head.appendChild(script);
setTimeout(function(){
var dom =$('[data-label=arr]').get(0);
var data = [
{ item: '竞价选取', count: 40, percent: 0.4 },
{ item: '随机选取', count: 21, percent: 0.21 },
{ item: '直接选取', count: 17, percent: 0.17 },
{ item: '自行组织', count: 13, percent: 0.13 },
];
var chart = new G2.Chart({
container: dom,
autoFit: true,
});
chart.coordinate({ type: 'theta', outerRadius: 0.8, innerRadius: 0.5 });
chart
.interval()
.data(data)
.transform({ type: 'stackY' })
.encode('y', 'percent')
.encode('color', 'item')
.legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
.label({
position: 'outside',
text: (data) => `${data.item}: ${data.percent * 100}%`,
})
.tooltip((data) => ({
name: data.item,
value: `${data.percent * 100}%`,
}));
chart
.text()
.style('text', '累计金额')
.style('x', '50%')
.style('y', '50%')
.style('dy', -25)
.style('fontSize', 34)
.style('fill', '#8c8c8c')
.style('textAlign', 'center');
chart
.text()
.style('text', '0.9')
.style('x', '50%')
.style('y', '50%')
.style('dx', -25)
.style('dy', 25)
.style('fontSize', 44)
.style('fill', '#8c8c8c')
.style('textAlign', 'center');
chart
.text()
.style('text', '万元')
.style('x', '50%')
.style('y', '50%')
.style('dx', 35)
.style('dy', 25)
.style('fontSize', 28)
.style('fill', '#8c8c8c')
.style('textAlign', 'center');
chart.render();
}, 2500);