"@antv/my-f2": "^2.1.7",
- Dominant language
- JavaScript
- Stars
- 8k
- Forks
- 637
- PR merge metrics
- No merged PRs in 30d
Description
"@antv/my-f2": "^2.1.7" 版本 ,在钉钉小程序里饼图是否有点击事件,如果有怎么设置呢?
我的方法:
async onInitChart (F2, config) {
// 设置图表内边距
config.padding = [50,50,50,50]
if (this.data.chartsData.every(c => c.precent == 0)) {
dd.showToast({
type: 'success',
content: '暂无任务',
duration: 1500
})
return
}
// 创建图表
const chart = new F2.Chart(config)
// 数据绑定
chart.source(this.data.chartsData)
chart.coord({
// type的属性:饼图:polar,柱形:rect
// type: 'rect',
type: 'polar',
// transposed:转置,可设为true或false
transposed: true,
innerRadius: 0.6,
});
// 配置图形形状interval:柱形或弧形,一般构成柱状图、饼图等图表
// position:配置坐标轴
// color配置颜色,也可使用如color('字段名',['颜色','颜色',...])的方式自己定义
chart.interval()
.position('a*precent')
// .color('name', ['#ff8c00', '#fed8b1', '#10D295', '#A007E7', '#EE0D0D'])
// .color('name', ['#EE0D0D', '#ff8c00', '#fed8b1', '#A007E7', '#10D295'])
.color('name', ['#89BD56', '#9F07E6', '#F8C568', '#F18D07', '#ED0D0D'])
.adjust('stack')
.animate({
appear: {
duration: 300,
easing: 'cubicIn'
}
})
// axis配置坐标轴,这里false表示不渲染
chart.axis(false)
// 对饼图的标签进行设置,sidePadding表示文本距离画布左右两边的距离
// label1和label2分别对应图中的上下文字,可在return中进行样式的设置
chart.pieLabel({
sidePadding:30,
lineHeight: 50,
anchorOffset: 5,
inflectionOffset: 5,
adjustOffset: 15,
label1:(data, color) => {
return {
text: data.name,
fill: color,
fontSize: 14,
}
},
label2:(data, color) => {
return {
fill: color,
text: `${data.precent} (个)`,
fontWeight: 500,
fontSize: 14,
// offsetY: 80
}
},
triggerOn: 'touchstart',
activeShape: true,
activeStyle: {
offset: 1,
appendRadius: 8,
fillOpacity: 0.5,
}
})
// 配置tooltip
chart.tooltip(true)
chart.legend(false)
chart.render()
//两个要一起用才行
// chart.changeData(this.data.chartsData);//data为后端数据
// chart.repaint();//更新图表
return chart
},
Contributor guide
Research direction
No repository file, test, or entry point is named; begin by locating F2's pie-chart interaction handling and the DingTalk mini-program adapter. Compare the shown pieLabel touch configuration with existing interaction examples. Done would require a documented, reproducible answer or a confirmed implementation path for pie-slice click events.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization, mobile-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 15/100