当前位置：首页 > news >正文

来自echarts的灵感

news 来源：原创 2024/9/22 7:41:15

刻度定位

在图表的类别轴上找到一个给定刻度值 (targetTickId) 的位置 (coord)

coord：Number；=>像素值为空间位置
targetValue：Number；=> 刻度线某处所代表的值

遍历刻度线

如果 tickValue 等于 targetTickId，则找到了目标位置，赋值给 coord 并退出循环。
如果 tickValue 小于 targetTickId，更新 leftCoord 为当前遍历处刻度的位置。
如果 tickValue 大于 targetTickId，并且 leftCoord 已经有值，说明 targetTickId 在 leftCoord 和当前刻度之间。计算它们的中间位置作为 coord 并退出循环。

 getMarkerPosition(value: ScaleDataValue[],dims?: typeof dimPermutations[number],startingAtTick?: boolean) {const coordSys = this.coordinateSystem;if (coordSys && coordSys.clampData) {// PENDING if clamp ?const clampData = coordSys.clampData(value);const pt = coordSys.dataToPoint(clampData);if (startingAtTick) {each(coordSys.getAxes(), function (axis: Axis2D, idx: number) {// If axis type is category, use tick coords insteadif (axis.type === 'category' && dims != null) {const tickCoords = axis.getTicksCoords();const alignTicksWithLabel = axis.getTickModel().get('alignWithLabel');//targetTickValue 作为变量名比 targetTickId 更能准确地表达其含义let targetTickId = clampData[idx];// The index of rightmost tick of markArea is 1 larger than x1/y1 indexconst isEnd = dims[idx] === 'x1' || dims[idx] === 'y1';if (isEnd && !alignTicksWithLabel) {targetTickId += 1;}// The only contains one tick, tickCoords is// like [{coord: 0, tickValue: 0}, {coord: 0}]// to the length should always be larger than 1if (tickCoords.length < 2) {return;}else if (tickCoords.length === 2) {// The left value and right value of the axis are// the same. coord is 0 in both items. Use the max// value of the axis as the coordpt[idx] = axis.toGlobalCoord(axis.getExtent()[isEnd ? 1 : 0]);return;}let leftCoord;let coord;let stepTickValue = 1;for (let i = 0; i < tickCoords.length; i++) {const tickCoord = tickCoords[i].coord;// The last item of tickCoords doesn't contain// tickValueconst tickValue = i === tickCoords.length - 1? tickCoords[i - 1].tickValue + stepTickValue//对于最后一个刻度（i === tickCoords.length - 1），由于它通常表示轴的边界，//所以我们用前一个刻度的 tickValue 加上步长 (stepTickValue) 来模拟最后一个刻度的值。: tickCoords[i].tickValue;if (tickValue === targetTickId) {coord = tickCoord;break;}else if (tickValue < targetTickId) {leftCoord = tickCoord;}else if (leftCoord != null && tickValue > targetTickId) {coord = (tickCoord + leftCoord) / 2;break;}if (i === 1) {// Here we assume the step of category axes is// the samestepTickValue = tickValue - tickCoords[0].tickValue;}}if (coord == null) {if (!leftCoord) {// targetTickId is smaller than all tick ids in the// visible area, use the leftmost tick coordcoord = tickCoords[0].coord;}else if (leftCoord) {// targetTickId is larger than all tick ids in the// visible area, use the rightmost tick coordcoord = tickCoords[tickCoords.length - 1].coord;}}pt[idx] = axis.toGlobalCoord(coord);}});}else {const data = this.getData();const offset = data.getLayout('offset');const size = data.getLayout('size');const offsetIndex = (coordSys as Cartesian2D).getBaseAxis().isHorizontal() ? 0 : 1;pt[offsetIndex] += offset + size / 2;}return pt;}return [NaN, NaN];}