Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
lcldyh opened this issue May 24, 2024 · 0 comments · Fixed by antvis/g2-extensions#27
Closed

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

lcldyh opened this issue May 24, 2024 · 0 comments · Fixed by antvis/g2-extensions#27
Assignees
Labels

Comments

@lcldyh
Copy link

lcldyh commented May 24, 2024

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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants