Description
🐛 bug 描述 [详细地描述 bug，让大家都能理解]
在箱型图中使用标注，标注无法显示，文本标注，辅助线标注都不行
📷 复现步骤 [清晰描述复现步骤，让别人也能看到问题]
🏞 期望结果 [描述你原本期望看到的结果]
💻 复现代码 [提供可复现的代码，仓库，或线上示例]
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Box } from '@ant-design/plots';
const DemoBox = () => {
const data = [
{
x: 'Oceania',
low: 1,
q1: 9,
median: 16,
q3: 22,
high: 24,
},
{
x: 'East Europe',
low: 1,
q1: 5,
median: 8,
q3: 12,
high: 16,
},
{
x: 'Australia',
low: 1,
q1: 8,
median: 12,
q3: 19,
high: 26,
},
{
x: 'South America',
low: 2,
q1: 8,
median: 12,
q3: 21,
high: 28,
},
{
x: 'North Africa',
low: 1,
q1: 8,
median: 14,
q3: 18,
high: 24,
},
{
x: 'North America',
low: 3,
q1: 10,
median: 17,
q3: 28,
high: 30,
},
{
x: 'West Europe',
low: 1,
q1: 7,
median: 10,
q3: 17,
high: 22,
},
{
x: 'West Africa',
low: 1,
q1: 6,
median: 8,
q3: 13,
high: 16,
},
];
const config = {
width: 400,
height: 500,
data: data,
xField: 'x',
yField: ['low', 'q1', 'median', 'q3', 'high'],
meta: {
low: {
alias: '最低值',
},
q1: {
alias: '下四分位数',
},
median: {
alias: '最低值',
},
q3: {
alias: '上四分位数',
},
high: {
alias: '最高值',
},
},
tooltip: {
fields: ['high', 'q3', 'median', 'q1', 'low'],
},
boxStyle: {
stroke: '#545454',
fill: '#1890FF',
fillOpacity: 0.3,
},
animation: false,
annotations: [
{
type: 'line',
/** 起始位置 */
start: ['min', 10],
/** 结束位置 */
end: ['max', 10],
text: {
content: '最大值',
position: 'right',
offsetY: 18,
style: {
textAlign: 'right',
},
},
style: {
lineDash: [4, 4],
},
},
{
type: 'line',
/** 起始位置 */
start: ['min', 15],
/** 结束位置 */
end: ['max', 15],
text: {
content: '平均值线',
position: 'right',
offsetY: -6,
style: {
textAlign: 'right',
fill: 'lightblue',
},
},
style: {
lineDash: [4, 4],
stroke: 'lightblue',
},
},
],
};
return <Box {...config} />;
};
ReactDOM.render(, document.getElementById('container'));
© 版本信息
v1.4.0
- ant-design-charts 版本: [e.g. 0.9.0]
- 浏览器环境
- 开发环境 [e.g. mac OS]