ant-design-charts
ant-design-charts copied to clipboard
🐛[BUG] v2版本,使用双轴图,加上横向可滚动,x坐标轴和柱状图不对齐
🐛 bug 描述 [详细地描述 bug,让大家都能理解]
📷 复现步骤 [清晰描述复现步骤,让别人也能看到问题]
使用如下的配置
import { DualAxes } from "@ant-design/plots";
import React from "react";
import ReactDOM from "react-dom";
const DemoDualAxes = () => {
// const config = {
// xField: 'time',
// data: [
// { time: '10:10', call: 4, waiting: 2, people: 2 },
// { time: '10:15', call: 2, waiting: 6, people: 3 },
// { time: '10:20', call: 13, waiting: 2, people: 5 },
// { time: '10:25', call: 9, waiting: 9, people: 1 },
// { time: '10:30', call: 5, waiting: 2, people: 3 },
// { time: '10:35', call: 8, waiting: 2, people: 1 },
// { time: '10:40', call: 13, waiting: 1, people: 2 },
// ],
// legend: {
// color: {
// itemMarker: (v) => {
// if (v === 'waiting') return 'rect'
// return 'smooth'
// }
// }
// },
// children: [
// {
// type: 'interval',
// yField: 'waiting',
// },
// {
// type: 'line',
// yField: 'people',
// shapeField: 'smooth',
// scale: { color: { relations: [['people', '#fdae6b']] } },
// axis: { y: { position: 'right' } },
// style: { lineWidth: 2 },
// },
// ],
// scrollbar: {
// x: {}
// }
// };
const data = [
{ time: "10:10", call: 4, taskNum: 2, inTimeRateValue: 2 },
{ time: "10:15", call: 2, taskNum: 6, inTimeRateValue: 3 },
{ time: "10:20", call: 13, taskNum: 2, inTimeRateValue: 5 },
{ time: "10:25", call: 9, taskNum: 9, inTimeRateValue: 1 },
{ time: "10:30", call: 5, taskNum: 2, inTimeRateValue: 3 },
{ time: "10:35", call: 8, taskNum: 2, inTimeRateValue: 1 },
{ time: "10:40", call: 13, taskNum: 1, inTimeRateValue: 2 },
];
const config = {
data: data,
xField: "time",
// scale: {
// y: { nice: true },
// // x: { nice: true },
// color: {
// zero: true,
// relations: [
// ["taskNum", "#EE6666"],
// ["inTimeRateValue", "#91CC75"],
// ],
// },
// },
legend: {
color: {
itemMarker: (v) => {
console.log("itemMarker: ", v);
if (v === "taskNum") return "rect";
return "smooth";
},
itemLabelText: (v) => {
console.log("itemLabelText: ", v);
if (v.id === "inTimeRateValue") return "及时反馈率";
return "任务数量";
},
},
},
children: [
{
type: "interval",
yField: "taskNum",
axis: {
x: {},
y: {
position: "left",
labelFormatter: (datum, index, data, Vector) => {
// console.log('datum, index, data, Vector: ', datum, index, data, Vector);
return `${datum}个`;
},
},
},
tooltip: {
items: [
{ channel: "y", name: "任务数", valueFormatter: (d) => `${d}个` },
],
},
// style: { width: 30 },
},
{
type: "line",
yField: "inTimeRateValue",
shapeField: "smooth",
axis: {
y: {
position: "right",
labelFormatter: (datum, index, data, Vector) => {
// console.log('datum, index, data, Vector: ', datum, index, data, Vector);
return `${datum}%`;
},
},
},
tooltip: {
items: [
{
channel: "y",
name: "及时率",
valueFormatter: (d) => {
console.log("valueFormatter: ", d);
return `${d}%`;
},
},
],
},
},
],
scrollbar: {
x: {
// ratio: 0.9,
// value: 0,
},
},
};
return <DualAxes {...config} />;
};
ReactDOM.render(<DemoDualAxes />, document.getElementById("container"));
显示结果:tooltip配置中文名失效,tooltip显示出的竖线与坐标轴不对齐
<img width="1440" alt="截屏2024-09-25 09 41 34" src="https://github.com/user-attachments/assets/31f3b122-9019-4390-8e93-fa626df5b57a">
🏞 期望结果 [描述你原本期望看到的结果]
💻 复现代码 [提供可复现的代码,仓库,或线上示例]
© 版本信息
- ant-design-charts 版本: v2.2.1
- 浏览器环境
- 开发环境 [e.g. mac OS]