ant-design-charts icon indicating copy to clipboard operation
ant-design-charts copied to clipboard

🐛[BUG] v2版本,使用双轴图,加上横向可滚动,x坐标轴和柱状图不对齐

Open yyyyffqqqq opened this issue 5 months ago • 0 comments

🐛 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]

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

截屏2024-09-24 17 45 40

yyyyffqqqq avatar Sep 24 '24 09:09 yyyyffqqqq