antvis/G2
The issue has been closed
BUG 鼠标经过显示内容及颜色不正确! #6243
lcldyh posted onGitHub
问题 1: 无数据 鼠标经过 却显示的是 五级,五级的数值是 0 .
问题 2: 背景颜色是自定义的,无数据应该是灰色的,但是却显示了五级的颜色红色。
https://codesandbox.io/p/sandbox/happy-ride-9wn5rm
以下是代码
import { plotlib } from '@antv/g2-extension-plot';
import { Runtime, corelib, extend } from '@antv/g2';
const Chart = extend(Runtime, { ...corelib(), ...plotlib() });
const chart = new Chart({
container: 'container',
autoFit: false,
});
const data = {
"label": "数据局资源最高分级别",
"children": [
{
"levelKey": "0",
"label": "不涉敏",
"color": "#aedf8e",
"percentage": "",
"count": 0,
"children": [],
"name": "不涉敏"
},
{
"levelKey": "1",
"label": "一级",
"color": "#ffef9e",
"percentage": "",
"count": 0,
"children": [],
"name": "一级"
},
{
"levelKey": "2",
"label": "二级",
"color": "#ffcf7e",
"percentage": "",
"count": 0,
"children": [],
"name": "二级"
},
{
"levelKey": "3",
"label": "三级",
"color": "#ffae0d",
"percentage": "",
"count": 0,
"children": [],
"name": "三级"
},
{
"levelKey": "4",
"label": "四级",
"color": "#ff6e0d",
"percentage": "",
"count": 0,
"children": [],
"name": "四级"
},
{
"levelKey": "5",
"label": "五级",
"color": "#ff0000",
"percentage": "",
"count": 0,
"children": [],
"name": "五级"
},
{
"levelKey": "-1",
"label": "无数据",
"color": "#dfdfdf",
"percentage": "100",
"count": 536,
"children": [
{
"type": 1,
"count": 132,
"percentage": "24.6",
"color": "#dfdfdf",
"label": "应用系统",
"name": "应用系统"
},
{
"type": 2,
"count": 183,
"percentage": "34.1",
"color": "#dfdfdf",
"label": "接口服务",
"name": "接口服务"
},
{
"type": 3,
"count": 100,
"percentage": "18.6",
"color": "#dfdfdf",
"label": "数据库",
"name": "数据库"
},
{
"type": 4,
"count": 1,
"percentage": "0.1",
"color": "#dfdfdf",
"label": "大数据",
"name": "大数据"
},
{
"type": 5,
"count": 120,
"percentage": "22.3",
"color": "#dfdfdf",
"label": "应用系统 & 接口服务",
"name": "应用系统 & 接口服务"
}
],
"name": "无数据"
}
]
}
chart
.sunburst()
.encode('value', 'count')
.encode('color', 'color')
.scale('color', { type: 'identity' })
.label({
text: 'name',
fill: '#333',
transform: [
{
type: 'overlapDodgeY',
},
],
})
.data({
type: 'inline',
value: data,
})
chart.render();