@easyv/charts 1.9.20 → 1.9.21

package/lib/components/Axis.js

@@ -264,7 +264,7 @@ var Label = function Label(_ref5) {
     // y={y}
     ,
     style: {
-      overflow: "visible"
+      overflow: "hidden"
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: className,
@@ -334,14 +334,20 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     clipAxisRange = _ref6.clipAxisRange,
     controlInfo = _ref6.controlInfo,
     rawTicks = _ref6.rawTicks,
-    paddingOuter = _ref6.paddingOuter;
+    paddingOuter = _ref6.paddingOuter,
+    controlEnd = _ref6.controlEnd,
+    start = _ref6.start;
   var _useContext = (0, _react.useContext)(_context.chartContext),
     width = _useContext.width,
     height = _useContext.height,
     isIOS = _useContext.isIOS;
   var cHeight = controlInfo.cHeight,
     isC = controlInfo.isC,
-    cPercent = controlInfo.cPercent;
+    cPercent = controlInfo.cPercent,
+    cBarX = controlInfo.cBarX,
+    cWidth = controlInfo.cWidth,
+    cBarWidth = controlInfo.cBarWidth;
+  var clipPathIdRef = (0, _react.useRef)("axis-clip-".concat(orientation, "-").concat(axisType, "-").concat(Math.random().toString(36).substr(2, 9)));
   var x = orientation == "right" ? width : 0;
   var y = orientation == "bottom" ? height - cHeight : 0;
   var LabelWidth = 1;
@@ -444,6 +450,13 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     }
   }
   function drawLabel() {
+    // 在 drawLabel 内部重新计算 translateX，确保使用最新的 controlInfo
+    var labelTranslateX = 0;
+    if (isC && isIOS && axisType === "x" && controlEnd !== undefined && start !== undefined) {
+      var percent = cBarX / (cWidth - cBarWidth);
+      var validPercent = isNaN(percent) ? 1 : percent;
+      labelTranslateX = -(controlEnd + start / cPercent - width) * validPercent;
+    }
     var draw = function draw(ticks, scaler) {
       return ticks.map(function (tick, index) {
         var coordinate = scaler(tick);
@@ -464,7 +477,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
           coordinate: coordinate,
           iosTrans: {
             isIOS: isIOS,
-            x: marginLeft + x,
+            x: marginLeft + x + (isIOS && isC && axisType === "x" ? labelTranslateX : 0),
             y: marginTop + y
           },
           config: label,
@@ -537,10 +550,20 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
   }), tickLine && drawAxisTickLine()))), /*#__PURE__*/_react["default"].createElement("svg", {
     width: width,
     style: {
-      overflow: axisType === "x" && isC ? "hidden" : "visible"
+      overflow: "hidden"
     }
-  }, /*#__PURE__*/_react["default"].createElement("g", {
-    transform: "translate(" + x + ", " + y + ")"
+  }, axisType === "x" && isC || isIOS && axisType === "x" ? /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
+    id: clipPathIdRef.current,
+    clipPathUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "0",
+    y: "0",
+    width: xLineRange,
+    height: height + 200,
+    fill: "transparent"
+  }))) : null, /*#__PURE__*/_react["default"].createElement("g", {
+    transform: "translate(" + x + ", " + y + ")",
+    clipPath: axisType === "x" && isC || isIOS && axisType === "x" ? "url(#".concat(clipPathIdRef.current, ")") : undefined
   }, /*#__PURE__*/_react["default"].createElement("g", {
     ref: ref
   }, label && gridLine && drawLabel(), isC && /*#__PURE__*/_react["default"].createElement(AxisLine, {

package/lib/components/CartesianChart.js

@@ -127,6 +127,10 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     controlInfo = _useState6[0],
     setControlInfo = _useState6[1];
+  var _useState7 = (0, _react.useState)(0),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    clipX = _useState8[0],
+    setClipX = _useState8[1];
   var cWidth = controlInfo.cWidth,
     cHeight = controlInfo.cHeight,
     cBarWidth = controlInfo.cBarWidth,
@@ -166,10 +170,10 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       })
     };
   };
-  var _useState7 = (0, _react.useState)(initCtlTip),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    ctlTip = _useState8[0],
-    setCtlTip = _useState8[1]; //控制图的提示框
+  var _useState9 = (0, _react.useState)(initCtlTip),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    ctlTip = _useState10[0],
+    setCtlTip = _useState10[1]; //控制图的提示框
 
   (0, _react.useEffect)(function () {
     var handleAction = function handleAction(e) {
@@ -352,7 +356,10 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       percent = isNaN(percent) ? 1 : percent;
       var translateX = -(controlEnd + start / cPercent - chartWidth) * percent;
       curControlPercent.current = percent;
-      // seriesEl.current.style.transform = `translate(${translateX}px,${marginTop}px)`;
+      setClipX(-translateX);
+      var _isVertical = axisX.direction === "vertical";
+      var coreOffset = _isVertical ? marginRight : isIOS ? marginLeft : 0;
+      seriesEl.current.style.transform = "translate(".concat(translateX + coreOffset, "px,").concat(marginTop, "px)");
       axisElList.current[2].style.transform = "translate(".concat(translateX, "px,", 0, "px)");
     }
   }, [controlInfo]);
@@ -596,7 +603,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   }, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
     id: "chart-clip-".concat(id)
   }, /*#__PURE__*/_react["default"].createElement("rect", {
-    x: "0",
+    x: clipX,
     y: "0",
     width: xLineRange,
     height: yLineRange,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.9.20",
+  "version": "1.9.21",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Axis.tsx

@@ -9,6 +9,7 @@ import React, {
   CSSProperties,
   MouseEventHandler,
   forwardRef,
+  useRef,
 } from "react";
 import { getTickCoord, getGridCoord, getFontStyle } from "../utils";
 import { chartContext } from "../context";
@@ -307,7 +308,7 @@ const Label: (
       height="100%"
       // x={x}
       // y={y}
-      style={{ overflow: "visible" }}
+      style={{ overflow: "hidden" }}
     >
       <div
         className={className}
@@ -388,13 +389,22 @@ export default memo(
         controlInfo,
         rawTicks,
         paddingOuter,
+        // 从展开的 config 中获取控制图相关属性
+        controlEnd,
+        start,
       }: any,
       ref
     ) => {
       const { width, height, isIOS } = useContext(chartContext);
-      const { cHeight, isC, cPercent } = controlInfo;
+      const { cHeight, isC, cPercent, cBarX, cWidth, cBarWidth } = controlInfo;
+      const clipPathIdRef = useRef(
+        `axis-clip-${orientation}-${axisType}-${Math.random()
+          .toString(36)
+          .substr(2, 9)}`
+      );
       const x = orientation == "right" ? width : 0;
       const y = orientation == "bottom" ? height - cHeight : 0;
+
       let LabelWidth = 1;
       if (label.labelNum == "Fixed") {
         LabelWidth = label.appearance.width;
@@ -543,6 +553,21 @@ export default memo(
         }
       }
       function drawLabel() {
+        // 在 drawLabel 内部重新计算 translateX，确保使用最新的 controlInfo
+        let labelTranslateX = 0;
+        if (
+          isC &&
+          isIOS &&
+          axisType === "x" &&
+          controlEnd !== undefined &&
+          start !== undefined
+        ) {
+          const percent = cBarX / (cWidth - cBarWidth);
+          const validPercent = isNaN(percent) ? 1 : percent;
+          labelTranslateX =
+            -(controlEnd + start / cPercent - width) * validPercent;
+        }
+
         const draw = (ticks: any, scaler: any) => {
           return ticks.map((tick: string, index: number) => {
             const coordinate = scaler(tick);
@@ -571,7 +596,16 @@ export default memo(
                       className="__easyv-label"
                       orientation={orientation}
                       coordinate={coordinate}
-                      iosTrans={{ isIOS, x: marginLeft + x, y: marginTop + y }}
+                      iosTrans={{
+                        isIOS,
+                        x:
+                          marginLeft +
+                          x +
+                          (isIOS && isC && axisType === "x"
+                            ? labelTranslateX
+                            : 0),
+                        y: marginTop + y,
+                      }}
                       config={label}
                       label={tick}
                       tickSize={_tickSize}
@@ -680,10 +714,34 @@ export default memo(
           <svg
             width={width}
             style={{
-              overflow: axisType === "x" && isC ? "hidden" : "visible",
+              overflow: "hidden",
             }}
           >
-            <g transform={"translate(" + x + ", " + y + ")"}>
+            {/* 定义裁剪路径：用于iOS端超出隐藏 */}
+            {(axisType === "x" && isC) || (isIOS && axisType === "x") ? (
+              <defs>
+                <clipPath
+                  id={clipPathIdRef.current}
+                  clipPathUnits="userSpaceOnUse"
+                >
+                  <rect
+                    x="0"
+                    y="0"
+                    width={xLineRange}
+                    height={height + 200}
+                    fill="transparent"
+                  />
+                </clipPath>
+              </defs>
+            ) : null}
+            <g
+              transform={"translate(" + x + ", " + y + ")"}
+              clipPath={
+                (axisType === "x" && isC) || (isIOS && axisType === "x")
+                  ? `url(#${clipPathIdRef.current})`
+                  : undefined
+              }
+            >
               {/* 用于控制图 */}
               <g ref={ref as any}>
                 {label && gridLine && drawLabel()}

package/src/components/CartesianChart.js

@@ -115,6 +115,7 @@ const Chart = memo(
       cPercent: dragPercent,
       cBarX: controlX,
     });
+    const [clipX, setClipX] = useState(0);
     const { cWidth, cHeight, cBarWidth, cPercent, cBarX } = controlInfo;
 
     yLineRange -= cHeight;
@@ -344,7 +345,12 @@ const Chart = memo(
         const translateX =
           -(controlEnd + start / cPercent - chartWidth) * percent;
         curControlPercent.current = percent;
-        // seriesEl.current.style.transform = `translate(${translateX}px,${marginTop}px)`;
+        setClipX(-translateX);
+        const isVertical = axisX.direction === "vertical";
+        const coreOffset = isVertical ? marginRight : isIOS ? marginLeft : 0;
+        seriesEl.current.style.transform = `translate(${
+          translateX + coreOffset
+        }px,${marginTop}px)`;
         axisElList.current[2].style.transform = `translate(${translateX}px,${0}px)`;
       }
     }, [controlInfo]);
@@ -583,7 +589,6 @@ const Chart = memo(
                 : `translateY(${-marginTop}px)`,
             }}
           >
-            {/* 关键修改1：添加clipPath定义，限定裁剪区域 */}
             <svg
               width="100%"
               height="100%"
@@ -600,7 +605,7 @@ const Chart = memo(
               <defs>
                 <clipPath id={`chart-clip-${id}`}>
                   <rect
-                    x="0"
+                    x={clipX}
                     y="0"
                     width={xLineRange}
                     height={yLineRange}
@@ -610,6 +615,7 @@ const Chart = memo(
               </defs>
 
               {/* 关键修改2：将所有图表内容包裹在g标签中，并应用clipPath */}
+              {/* <g> */}
               <g clipPath={`url(#chart-clip-${id})`}>
                 {/* 控制图指示器部分 */}
                 <g>