Description
🐛 bug 描述 [详细地描述 bug，让大家都能理解]
堆叠柱线图在绘制20种以上时，会出现第20个之后的循环复用1-20的色值和label，并不是其真实的label
📷 复现步骤 [清晰描述复现步骤，让别人也能看到问题]
在地址https://ant-design-charts.antgroup.com/zh/examples/statistics/dual-axes/#stacked-column-line跑demo可复现
这是配置信息：
import { DualAxes } from '@ant-design/plots';
import React from 'react';
import ReactDOM from 'react-dom';
const DemoDualAxes = () => {
const uvBillData = [
{ time: '2019-03', value: 220, type: '1' },
{ time: '2019-03', value: 220, type: '2' },
{ time: '2019-03', value: 220, type: '3' },
{ time: '2019-03', value: 220, type: '4' },
{ time: '2019-03', value: 220, type: '5' },
{ time: '2019-03', value: 220, type: '6' },
{ time: '2019-03', value: 220, type: '7' },
{ time: '2019-03', value: 220, type: '8' },
{ time: '2019-03', value: 220, type: '9' },
{ time: '2019-03', value: 220, type: '10' },
{ time: '2019-03', value: 220, type: '11' },
{ time: '2019-03', value: 220, type: '12' },
{ time: '2019-03', value: 220, type: '13' },
{ time: '2019-03', value: 220, type: '14' },
{ time: '2019-03', value: 220, type: '15' },
{ time: '2019-03', value: 220, type: '16' },
{ time: '2019-03', value: 220, type: '17' },
{ time: '2019-03', value: 18, type: '18' },
{ time: '2019-03', value: 19, type: '19' },
{ time: '2019-03', value: 20, type: '20' },
{ time: '2019-03', value: 21, type: '21' },
{ time: '2019-03', value: 22, type: '22' },
];
const transformData = [
{ time: '2019-03', count: 800 },
{ time: '2019-04', count: 600 },
{ time: '2019-05', count: 400 },
{ time: '2019-06', count: 380 },
{ time: '2019-07', count: 220 },
];
const config = {
xField: 'time',
children: [
{
data: uvBillData,
type: 'interval',
yField: 'value',
stack: true,
colorField: 'type',
style: { maxWidth: 80 },
scale: { y: { domainMax: 1200 } },
interaction: { elementHighlight: { background: true }}
},
{
data: transformData,
type: 'line',
yField: 'count',
colorField: () => 'count',
style: { lineWidth: 2 },
axis: { y: { position: 'right' } },
interaction: {
tooltip: {
crosshairs: false,
marker: false,
},
},
},
],
};
return <DualAxes {...config} />;
};
ReactDOM.render(, document.getElementById('container'));
🏞 期望结果 [描述你原本期望看到的结果]
期望20之后的数据也能正常显示
💻 复现代码 [提供可复现的代码，仓库，或线上示例]
© 版本信息
- ant-design-charts 版本: [e.g. 0.9.0]
- 浏览器环境 chrome
- 开发环境 [e.g. mac OS]