Merge pull request #19919 from apache/dvdkon-fix-13627

feat(axis): custom axis tick/label positions

src/coord/axisCommonTypes.ts

@@ -186,7 +186,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;
@@ -238,9 +239,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 {
@@ -273,6 +275,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)