ant-design / ant-design-charts

A React Chart Library
https://ant-design-charts.antgroup.com/
MIT License
1.91k stars 359 forks source link

🐛[BUG] Liquid Chart | 液体图 Cannot read property 'mappingData' of undefined #792

Closed KageyamaJie closed 9 months ago

KageyamaJie commented 3 years ago

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

由于它的title和customHtml的默认液体图表统计属性无法与图表一起下载为base64。 (如步骤重现链接所示)

这就是为什么我使用它的label属性来允许图表标签在下载为base64时可见。 (如步骤重现链接所示) 当液体图表添加label属性和autofit为true。 然后在浏览器中只是放大或缩小会得到错误。

🐛 bug description

Due to the default Liquid chart statistic property of it's title & customHtml are unable able to be downloaded together with the chart as base64. (As shown in the Step to reproduce link)

That's why I used statistic of it's label property to allow the chart label to be visible when download as base64. (As shown in the Step to reproduce link) When Liquid chart added label property and autofit as true. Then in the browser just zoom in or zoom out would get the error.

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

  1. 使用官方示例从[https://codesandbox.io/s/pdipe[url]
  2. 在应用程序中。tsx删除整个统计属性。
  3. 然后添加 statistic: { content: { customHtml: () => '<div style="display: none !important"></div>' // hide default content in html } }, label: { position: "middle", formatter: () =>Conversion Rate: ${(config.percent * 100).toFixed(0)}% // style: { // fill: config.percent > 0.65 ? 'white' : 'rgba(44,53,66,0.85)', // fontSize: '25', // }, }, autoFit: true,
  4. 之后放大或缩小,您将获得未定义错误的"映射数据"。

    📷 Step to reproduce

  5. Use the official example from https://codesandbox.io/s/pdipe
  6. In the App.tsx remove the entire statistic property.
  7. Then add statistic: { content: { customHtml: () => '<div style="display: none !important"></div>' // hide default content in html } }, label: { position: "middle", formatter: () =>Conversion Rate: ${(config.percent * 100).toFixed(0)}% // style: { // fill: config.percent > 0.65 ? 'white' : 'rgba(44,53,66,0.85)', // fontSize: '25', // }, }, autoFit: true,
  8. After that zoom in or zoom out and you will get the 'mappingData' of undefined error.

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

液体图表的工作没有错误,能够有autofit为true,并与label属性,可以捕获base64下载。

🏞 Expected result

Liquid Chart to work without error, able to have autofit as true and with label property that can be captured for base64 download.

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

https://codesandbox.io/s/liquidchartautofitlabelerror-cmkb6?file=/App.tsx

💻Link to minimal reproduction

https://codesandbox.io/s/liquidchartautofitlabelerror-cmkb6?file=/App.tsx

© 版本信息

Version

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

lxfu1 commented 9 months ago

html2canvas