@easyv/charts 1.9.19 → 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(".concat(translateX, "px,").concat(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]);
@@ -589,9 +596,20 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     ref: seriesEl,
     style: {
       overflow: "visible",
+      // 保留原有样式，clipPath会接管裁剪
       position: "absolute",
       transform: isVertical ? "translate(".concat(marginRight, "px,").concat(isIOS ? marginTop : 0, "px)") : "translate(".concat(isIOS ? marginLeft : 0, "px,").concat(marginTop, "px)")
     }
+  }, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
+    id: "chart-clip-".concat(id)
+  }, /*#__PURE__*/_react["default"].createElement("rect", {
+    x: clipX,
+    y: "0",
+    width: xLineRange,
+    height: yLineRange,
+    fill: "transparent"
+  }))), /*#__PURE__*/_react["default"].createElement("g", {
+    clipPath: "url(#chart-clip-".concat(id, ")")
   }, /*#__PURE__*/_react["default"].createElement("g", null, control && zIndex == "bottom" && ctlIndicatorList.map(function (item, index) {
     var x = axisX.scaler(item.tick);
     return /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({
@@ -662,7 +680,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       ctlIndicatorList: ctlIndicatorList,
       manual: manual
     }));
-  }))), showCtl && !!control && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
+  })))), showCtl && !!control && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
     isVertical: isVertical
   }, tooltip, {
     data: controlChartTooltipData,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.9.19",
+  "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]);
@@ -588,107 +594,124 @@ const Chart = memo(
               height="100%"
               ref={seriesEl}
               style={{
-                overflow: "visible",
+                overflow: "visible", // 保留原有样式，clipPath会接管裁剪
                 position: "absolute",
                 transform: isVertical
                   ? `translate(${marginRight}px,${isIOS ? marginTop : 0}px)`
                   : `translate(${isIOS ? marginLeft : 0}px,${marginTop}px)`,
               }}
             >
-              {/* 控制图指示器部分 */}
-              <g>
-                {control &&
-                  zIndex == "bottom" &&
-                  ctlIndicatorList.map((item, index) => {
-                    const x = axisX.scaler(item.tick);
-                    return (
-                      <Indicator
+              {/* 定义裁剪路径：只显示指定宽高的区域 */}
+              <defs>
+                <clipPath id={`chart-clip-${id}`}>
+                  <rect
+                    x={clipX}
+                    y="0"
+                    width={xLineRange}
+                    height={yLineRange}
+                    fill="transparent"
+                  />
+                </clipPath>
+              </defs>
+
+              {/* 关键修改2：将所有图表内容包裹在g标签中，并应用clipPath */}
+              {/* <g> */}
+              <g clipPath={`url(#chart-clip-${id})`}>
+                {/* 控制图指示器部分 */}
+                <g>
+                  {control &&
+                    zIndex == "bottom" &&
+                    ctlIndicatorList.map((item, index) => {
+                      const x = axisX.scaler(item.tick);
+                      return (
+                        <Indicator
+                          key={index}
+                          {...indicator}
+                          {...{
+                            height: yLineRange,
+                            width: indicatorWidth,
+                            x: x - indicatorWidth / 2,
+                          }}
+                          isControlChart={!!control}
+                          xName={item.tick}
+                          setCtlTip={setCtlTip}
+                          ctlIndicatorList={ctlIndicatorList}
+                          manual={true}
+                        />
+                      );
+                    })}
+                </g>
+                {/**绘制图表主体 */}
+                {series.map(({ Component, yOrZ, ...config }, index) => {
+                  const yAxis = axes.get(yOrZ);
+                  const isXRepeat = hasDuplicateX(series); //x项有重复项判断
+                  return (
+                    yAxis &&
+                    Component && (
+                      <Component
                         key={index}
-                        {...indicator}
-                        {...{
-                          height: yLineRange,
-                          width: indicatorWidth,
-                          x: x - indicatorWidth / 2,
-                        }}
+                        {...config}
+                        bandLength={bandLength}
+                        curXLabel={curXLabel}
+                        selectStyle={selectStyle}
+                        xAxis={axisX}
+                        yAxis={yAxis}
+                        auto={auto}
+                        // 控制图部分，主要是为了，当鼠标悬浮在指示器上时，显示对应的tooltip
                         isControlChart={!!control}
-                        xName={item.tick}
+                        indicatorWidth={indicatorWidth}
+                        triggerEvents={onInteraction}
                         setCtlTip={setCtlTip}
-                        ctlIndicatorList={ctlIndicatorList}
-                        manual={true}
+                        isXRepeat={isXRepeat}
+                        maxWidth={bar ? bar.maxWidth : 0}
                       />
-                    );
-                  })}
-              </g>
-              {/**绘制图表主体 */}
-              {series.map(({ Component, yOrZ, ...config }, index) => {
-                const yAxis = axes.get(yOrZ);
-                const isXRepeat = hasDuplicateX(series); //x项有重复项判断
-                return (
-                  yAxis &&
-                  Component && (
-                    <Component
-                      key={index}
-                      {...config}
-                      bandLength={bandLength}
-                      curXLabel={curXLabel}
-                      selectStyle={selectStyle}
-                      xAxis={axisX}
-                      yAxis={yAxis}
-                      auto={auto}
-                      // 控制图部分，主要是为了，当鼠标悬浮在指示器上时，显示对应的tooltip
-                      isControlChart={!!control}
-                      indicatorWidth={indicatorWidth}
-                      triggerEvents={onInteraction}
-                      setCtlTip={setCtlTip}
-                      isXRepeat={isXRepeat}
-                      maxWidth={bar ? bar.maxWidth : 0}
-                    />
-                  )
-                );
-              })}
-              {/* 图表数值标签 */}
-              {series.map(({ Component, yOrZ, ...config }, index) => {
-                const yAxis = axes.get(yOrZ);
-                const isXRepeat = hasDuplicateX(series); //x项有重复项判断
-                return (
-                  yAxis && (
-                    <Label
-                      isXRepeat={isXRepeat}
-                      key={index}
-                      {...config}
-                      curXLabel={curXLabel}
-                      selectStyle={selectStyle}
-                      bandLength={bandLength}
-                      xAxis={axisX}
-                      yAxis={yAxis}
-                      triggerEvents={onInteraction}
-                      isControlChart={!!control}
-                    />
-                  )
-                );
-              })}
-              <g>
-                {control &&
-                  zIndex != "bottom" &&
-                  ctlIndicatorList.map((item, index) => {
-                    const x = axisX.scaler(item.tick);
-                    return (
-                      <Indicator
+                    )
+                  );
+                })}
+                {/* 图表数值标签 */}
+                {series.map(({ Component, yOrZ, ...config }, index) => {
+                  const yAxis = axes.get(yOrZ);
+                  const isXRepeat = hasDuplicateX(series); //x项有重复项判断
+                  return (
+                    yAxis && (
+                      <Label
+                        isXRepeat={isXRepeat}
                         key={index}
-                        {...indicator}
-                        {...{
-                          height: yLineRange,
-                          width: indicatorWidth,
-                          x: x - indicatorWidth / 2,
-                        }}
+                        {...config}
+                        curXLabel={curXLabel}
+                        selectStyle={selectStyle}
+                        bandLength={bandLength}
+                        xAxis={axisX}
+                        yAxis={yAxis}
+                        triggerEvents={onInteraction}
                         isControlChart={!!control}
-                        xName={item.tick}
-                        setCtlTip={setCtlTip}
-                        ctlIndicatorList={ctlIndicatorList}
-                        manual={manual}
                       />
-                    );
-                  })}
+                    )
+                  );
+                })}
+                <g>
+                  {control &&
+                    zIndex != "bottom" &&
+                    ctlIndicatorList.map((item, index) => {
+                      const x = axisX.scaler(item.tick);
+                      return (
+                        <Indicator
+                          key={index}
+                          {...indicator}
+                          {...{
+                            height: yLineRange,
+                            width: indicatorWidth,
+                            x: x - indicatorWidth / 2,
+                          }}
+                          isControlChart={!!control}
+                          xName={item.tick}
+                          setCtlTip={setCtlTip}
+                          ctlIndicatorList={ctlIndicatorList}
+                          manual={manual}
+                        />
+                      );
+                    })}
+                </g>
               </g>
             </svg>
             {/* 控制图下的提示框 */}