@easyv/charts 1.9.20 → 1.9.22

package/lib/components/Axis.js

@@ -334,14 +334,19 @@ 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 x = orientation == "right" ? width : 0;
   var y = orientation == "bottom" ? height - cHeight : 0;
   var LabelWidth = 1;
@@ -444,6 +449,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 +476,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,

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/lib/components/ChartContainer.js

@@ -43,7 +43,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     onMouseMove: onMouseMove,
     ref: ref,
     style: _objectSpread({
-      overflow: "visible",
+      overflow: "hidden",
       position: "absolute",
       width: width,
       height: height

package/package.json

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

package/src/components/Axis.tsx

@@ -388,13 +388,17 @@ 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 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 +547,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 +590,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}

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]);
@@ -506,6 +512,7 @@ const Chart = memo(
           style={{ ...style, position: "absolute" }}
           width={width}
           height={height}
+          
           marginLeft={marginLeft}
           marginTop={marginTop}
           onMouseEnter={() => {
@@ -583,7 +590,6 @@ const Chart = memo(
                 : `translateY(${-marginTop}px)`,
             }}
           >
-            {/* 关键修改1：添加clipPath定义，限定裁剪区域 */}
             <svg
               width="100%"
               height="100%"
@@ -600,7 +606,7 @@ const Chart = memo(
               <defs>
                 <clipPath id={`chart-clip-${id}`}>
                   <rect
-                    x="0"
+                    x={clipX}
                     y="0"
                     width={xLineRange}
                     height={yLineRange}
@@ -610,6 +616,7 @@ const Chart = memo(
               </defs>
 
               {/* 关键修改2：将所有图表内容包裹在g标签中，并应用clipPath */}
+              {/* <g> */}
               <g clipPath={`url(#chart-clip-${id})`}>
                 {/* 控制图指示器部分 */}
                 <g>

package/src/components/ChartContainer.tsx

@@ -54,7 +54,7 @@ export default memo(
           onMouseMove={onMouseMove}
           ref={ref}
           style={{
-            overflow: "visible",
+            overflow: "hidden",
             position: "absolute",
             width,
             height,