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] 环形图 statistic 配置问题 #430

Closed
VladimirZL opened this issue Jan 13, 2021 · 1 comment
Closed

🐛[BUG] 环形图 statistic 配置问题 #430

VladimirZL opened this issue Jan 13, 2021 · 1 comment

Comments

@VladimirZL
Copy link

🐛 bug 描述 [详细地描述 bug,让大家都能理解]

切换环形图config中的statistic 属性时,导致变化前后content 和 title 样式不一致

📷 复现步骤 [清晰描述复现步骤,让别人也能看到问题]

在代码中通过一个按钮控制config的配置,如代码
通过 hidden 控制环形图中的内容是否显示。点击第一次,内容正常消失,再次点击,显示的content 和 title和初始样式不同

🏞 期望结果 [描述你原本期望看到的结果]

希望样式不会改变

💻 复现代码 [提供可复现的代码,仓库,或线上示例]

import React, { useState, useEffect } from "react";
import { Pie } from "@ant-design/charts";

const DemoPie: React.FC = () => {
  var data = [
    {
      type: "分类一",
      value: 27
    },
    {
      type: "分类二",
      value: 25
    },
    {
      type: "分类三",
      value: 18
    },
    {
      type: "分类四",
      value: 15
    },
    {
      type: "分类五",
      value: 10
    },
    {
      type: "其他",
      value: 5
    }
  ];
  const [hidden, setHidden] = useState(false)
  var config = {
    appendPadding: 10,
    data: data,
    angleField: "value",
    colorField: "type",
    radius: 1,
    innerRadius: 0.6,
    label: {
      type: "inner",
      // offset: '-50%',
      content: "{value}",
      style: {
        textAlign: "center",
        fontSize: 14
      }
    },
    interactions: [{ type: "element-selected" }, { type: "element-active" }],
    statistic: hidden ? {
      content: false,
      title: false
    } : {
      content: {},
      title: {}
    }
  };
  return (
    <div>
      <button onClick={
        () => {
          setHidden(!hidden)
        }
      }>test</button>
      <Pie {...config} />;
    </div>
  )
};

export default DemoPie;

© 版本信息

  • ant-design-charts 版本: [e.g. 0.9.0]
  • 浏览器环境
  • 开发环境 [e.g. mac OS]

🚑 其他信息 [如截图等其他信息可以贴在这里]

https://ibb.co/HhjTf1B
https://ibb.co/tHB9r6f

@visiky
Copy link
Collaborator

visiky commented Jan 22, 2021

内置了 默认样式,后续更新需要自己加上去

https://github.com/antvis/g2plot/blob/96e0f35e1ec2b45cd8d55fdd1f6390f3d83a0205/src/plots/pie/index.ts#L59

 /** 饼图中心文本默认样式 */
      statistic: {
        title: {
          style: { fontWeight: 300, color: '#4B535E', textAlign: 'center', fontSize: '20px', lineHeight: 1 },
        },
        content: {
          style: {
            fontWeight: 'bold',
            color: 'rgba(44,53,66,0.85)',
            textAlign: 'center',
            fontSize: '32px',
            lineHeight: 1,
          },
        },
      },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants