diff --git a/src/coord/axisCommonTypes.ts b/src/coord/axisCommonTypes.ts index cdbef2acd2..5ebdab3a1c 100644 --- a/src/coord/axisCommonTypes.ts +++ b/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 { /** * 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 extends AxisLabelBaseOption { @@ -273,6 +275,5 @@ interface SplitAreaOption { areaStyle?: AreaStyleOption } - export type AxisBaseOption = ValueAxisBaseOption | LogAxisBaseOption | CategoryAxisBaseOption | TimeAxisBaseOption | AxisBaseOptionCommon; diff --git a/src/coord/axisTickLabelBuilder.ts b/src/coord/axisTickLabelBuilder.ts index 6ac305f9bd..e7f7bbb088 100644 --- a/src/coord/axisTickLabelBuilder.ts +++ b/src/coord/axisTickLabelBuilder.ts @@ -60,6 +60,18 @@ type InnerStore = { const inner = makeInner(); +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) diff --git a/test/axis-customTicks.html b/test/axis-customTicks.html new file mode 100644 index 0000000000..24f9c7dc97 --- /dev/null +++ b/test/axis-customTicks.html @@ -0,0 +1,202 @@ + + + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + + + + + + + +