@easyv/charts 1.9.28 → 1.9.29

package/lib/components/Axis.js

@@ -34,8 +34,8 @@ var getCanvasContext = function getCanvasContext() {
   return canvasContext;
 };
 
-//计算文本宽度的函数
-var calculateTextWidth = exports.calculateTextWidth = function calculateTextWidth(text, fontConfig) {
+//计算文本宽度/高度的函数
+var calculateTextWidth = exports.calculateTextWidth = function calculateTextWidth(text, fontConfig, isVertical) {
   if (!text) return 0;
   var ctx = getCanvasContext();
   ctx.save();
@@ -47,16 +47,19 @@ var calculateTextWidth = exports.calculateTextWidth = function calculateTextWidt
   var letterSpacingWithUnit = "".concat(letterSpacing, "px");
   ctx.font = "".concat(fontWeight, " ").concat(fontStyle, " ").concat(fontSize, " ").concat(fontFamily);
   ctx.letterSpacing = letterSpacingWithUnit;
-  var totalWidth;
+  var totalWidth = 0;
+  var totalHeight = 0;
+  var textMetrics = ctx.measureText(text);
   if (typeof ctx.letterSpacing !== "undefined") {
-    totalWidth = ctx.measureText(text).width;
+    totalWidth = textMetrics.width;
   } else {
-    var baseWidth = ctx.measureText(text).width;
-    var spacingWidth = text.length * letterSpacing;
+    var baseWidth = textMetrics.width;
+    var spacingWidth = (text.length - 1) * letterSpacing;
     totalWidth = baseWidth + spacingWidth;
   }
+  totalHeight = textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent;
   ctx.restore();
-  return totalWidth;
+  return isVertical ? totalHeight : totalWidth;
 };
 var defaultEvent = function defaultEvent() {};
 var defaultAppearance = {
@@ -190,7 +193,7 @@ var Unit = function Unit(_ref4) {
     textAnchor: textAnchor
   }, dataUnit || text);
 };
-function maxLabelFT(data, config, formatter, font) {
+function maxLabelFT(data, config, formatter, font, isVertical) {
   var max = 0;
   data.length ? data.forEach(function (item) {
     if (calculateTextWidth(formatter(item, _objectSpread(_objectSpread({}, config), {}, {
@@ -198,12 +201,12 @@ function maxLabelFT(data, config, formatter, font) {
         type: config.format,
         showType: config.showType
       }
-    })), font) > max) max = calculateTextWidth(formatter(item, _objectSpread(_objectSpread({}, config), {}, {
+    })), font, isVertical) > max) max = calculateTextWidth(formatter(item, _objectSpread(_objectSpread({}, config), {}, {
       format: {
         type: config.format,
         showType: config.showType
       }
-    })), font);
+    })), font, isVertical);
   }) : "";
   return max;
 }
@@ -341,6 +344,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
   var cHeight = controlInfo.cHeight,
     isC = controlInfo.isC,
     cPercent = controlInfo.cPercent;
+  var isVertical = orientation == "left" || orientation == "right";
   var x = orientation == "right" ? width : 0;
   var y = orientation == "bottom" ? height - cHeight : 0;
   var LabelWidth = 1;
@@ -348,10 +352,10 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     LabelWidth = label.appearance.width;
   } else {
     if (allTicks.length && typeof allTicks[0] == "string") {
-      LabelWidth = maxLabelFT(allTicks, label, formatter, label.font);
+      LabelWidth = maxLabelFT(allTicks, label, formatter, label.font, isVertical);
     }
   }
-  var LabelNum = Math.floor(width / (isC ? cPercent : 1) * (1 - paddingOuter) / LabelWidth);
+  var LabelNum = !isVertical ? Math.floor(width / (isC ? cPercent : 1) * (1 - paddingOuter) / LabelWidth) : Math.floor(height / LabelWidth);
   var ticks = !label.adaptive ? tickss : getEvenlySpacedElements(allTicks, LabelNum < allTicks.length ? LabelNum > allTicks.length / 2 ? Math.ceil(allTicks.length / 2) : LabelNum : allTicks.length, label.showLast);
   if (!(on && ticks.length > 0)) return null;
 

package/package.json

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

package/src/components/Axis.tsx

@@ -28,8 +28,12 @@ const getCanvasContext = (): CanvasRenderingContext2D => {
   return canvasContext;
 };
 
-//计算文本宽度的函数
-export const calculateTextWidth = (text: string, fontConfig: any): number => {
+//计算文本宽度/高度的函数
+export const calculateTextWidth = (
+  text: string,
+  fontConfig: any,
+  isVertical: any
+): number => {
   if (!text) return 0;
   const ctx = getCanvasContext();
   ctx.save();
@@ -45,16 +49,22 @@ export const calculateTextWidth = (text: string, fontConfig: any): number => {
   const letterSpacingWithUnit = `${letterSpacing}px`;
   ctx.font = `${fontWeight} ${fontStyle} ${fontSize} ${fontFamily}`;
   ctx.letterSpacing = letterSpacingWithUnit;
-  let totalWidth;
+
+  let totalWidth = 0;
+  let totalHeight = 0;
+  const textMetrics = ctx.measureText(text);
+
   if (typeof ctx.letterSpacing !== "undefined") {
-    totalWidth = ctx.measureText(text).width;
+    totalWidth = textMetrics.width;
   } else {
-    const baseWidth = ctx.measureText(text).width;
-    const spacingWidth = text.length * letterSpacing;
+    const baseWidth = textMetrics.width;
+    const spacingWidth = (text.length - 1) * letterSpacing;
     totalWidth = baseWidth + spacingWidth;
   }
+  totalHeight =
+    textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent;
   ctx.restore();
-  return totalWidth;
+  return isVertical ? totalHeight : totalWidth;
 };
 const defaultEvent = () => {};
 const defaultAppearance = {
@@ -238,7 +248,13 @@ type LabelType = {
   LabelWidth: any;
 };
 
-function maxLabelFT(data: any, config: any, formatter: any, font: any) {
+function maxLabelFT(
+  data: any,
+  config: any,
+  formatter: any,
+  font: any,
+  isVertical: any
+) {
   let max = 0;
   data.length
     ? data.forEach((item: any) => {
@@ -248,7 +264,8 @@ function maxLabelFT(data: any, config: any, formatter: any, font: any) {
               ...config,
               format: { type: config.format, showType: config.showType },
             }),
-            font
+            font,
+            isVertical
           ) > max
         )
           max = calculateTextWidth(
@@ -256,7 +273,8 @@ function maxLabelFT(data: any, config: any, formatter: any, font: any) {
               ...config,
               format: { type: config.format, showType: config.showType },
             }),
-            font
+            font,
+            isVertical
           );
       })
     : "";
@@ -395,6 +413,7 @@ export default memo(
     ) => {
       const { width, height, isIOS } = useContext(chartContext);
       const { cHeight, isC, cPercent } = controlInfo;
+      const isVertical = orientation == "left" || orientation == "right";
       const x = orientation == "right" ? width : 0;
       const y = orientation == "bottom" ? height - cHeight : 0;
       let LabelWidth = 1;
@@ -402,12 +421,21 @@ export default memo(
         LabelWidth = label.appearance.width;
       } else {
         if (allTicks.length && typeof allTicks[0] == "string") {
-          LabelWidth = maxLabelFT(allTicks, label, formatter, label.font);
+          LabelWidth = maxLabelFT(
+            allTicks,
+            label,
+            formatter,
+            label.font,
+            isVertical
+          );
         }
       }
-      const LabelNum = Math.floor(
-        ((width / (isC ? cPercent : 1)) * (1 - paddingOuter)) / LabelWidth
-      );
+      const LabelNum = !isVertical
+        ? Math.floor(
+            ((width / (isC ? cPercent : 1)) * (1 - paddingOuter)) / LabelWidth
+          )
+        : Math.floor(height / LabelWidth);
+
       const ticks: any = !label.adaptive
         ? tickss
         : getEvenlySpacedElements(