feat(axis): add customValues option to customize axis tick/label positions

src/coord/axisCommonTypes.ts

@@ -185,7 +185,8 @@ interface AxisTickOption {
     inside?: boolean,
     // The length of axisTick.
     length?: number,
-    lineStyle?: LineStyleOption
+    lineStyle?: LineStyleOption,
+    customValues?: (number | string | Date)[]
 }
 
 type AxisLabelValueFormatter = (value: number, index: number) => string;
@@ -237,9 +238,10 @@ interface AxisLabelBaseOption extends Omit<TextCommonOption, 'color'> {
     /**
      * If hide overlapping labels.
      */
-    hideOverlap?: boolean;
+    hideOverlap?: boolean,
+    customValues?: (number | string | Date)[],
     // Color can be callback
-    color?: ColorString | ((value?: string | number, index?: number) => ColorString)
+    color?: ColorString | ((value?: string | number, index?: number) => ColorString),
     overflow?: TextStyleProps['overflow']
 }
 interface AxisLabelOption<TType extends OptionAxisType> extends AxisLabelBaseOption {
@@ -272,6 +274,5 @@ interface SplitAreaOption {
     areaStyle?: AreaStyleOption<ZRColor[]>
 }
 
-
 export type AxisBaseOption = ValueAxisBaseOption | LogAxisBaseOption
     | CategoryAxisBaseOption | TimeAxisBaseOption | AxisBaseOptionCommon;

src/coord/axisTickLabelBuilder.ts

@@ -60,6 +60,18 @@ type InnerStore = {
 
 const inner = makeInner<InnerStore, any>();
 
+function tickValuesToNumbers(axis: Axis, values: (number | string | Date)[]) {
+    const nums = zrUtil.map(values, val => axis.scale.parse(val));
+    if (axis.type === 'time' && nums.length > 0) {
+        // Time axis needs duplicate first/last tick (see TimeScale.getTicks())
+        // The first and last tick/label don't get drawn
+        nums.sort();
+        nums.unshift(nums[0]);
+        nums.push(nums[nums.length - 1]);
+    }
+    return nums;
+}
+
 export function createAxisLabels(axis: Axis): {
     labels: {
         level?: number,
@@ -69,6 +81,20 @@ export function createAxisLabels(axis: Axis): {
     }[],
     labelCategoryInterval?: number
 } {
+    const custom = axis.getLabelModel().get('customValues');
+    if (custom) {
+        const labelFormatter = makeLabelFormatter(axis);
+        return {
+            labels: tickValuesToNumbers(axis, custom).map(numval => {
+                const tick = {value: numval};
+                return {
+                    formattedLabel: labelFormatter(tick),
+                    rawLabel: axis.scale.getLabel(tick),
+                    tickValue: numval
+                };
+            })
+        };
+    }
     // Only ordinal scale support tick interval
     return axis.type === 'category'
         ? makeCategoryLabels(axis)
@@ -87,6 +113,12 @@ export function createAxisTicks(axis: Axis, tickModel: AxisBaseModel): {
     ticks: number[],
     tickCategoryInterval?: number
 } {
+    const custom = axis.getTickModel().get('customValues');
+    if (custom) {
+        return {
+            ticks: tickValuesToNumbers(axis, custom)
+        };
+    }
     // Only ordinal scale support tick interval
     return axis.type === 'category'
         ? makeCategoryTicks(axis, tickModel)