antvis/G2

BUG 鼠标经过显示内容及颜色不正确! #6243

lcldyh posted onGitHub

xiaolong02

问题 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();

Fund this Issue

$0.00
Funded

Pull requests