diff --git a/__tests__/bugs/issue-2749-spec.ts b/__tests__/bugs/issue-2749-spec.ts new file mode 100644 index 0000000000..2d221f70ba --- /dev/null +++ b/__tests__/bugs/issue-2749-spec.ts @@ -0,0 +1,31 @@ +import { Line, DualAxes } from '../../src'; +import { createDiv } from '../utils/dom'; + +describe('#2749', () => { + it('line color with callback', () => { + const line = new Line(createDiv(), { + width: 400, + height: 300, + autoFit: false, + data: [ + { year: '1991', value: 3 }, + { year: '1992', value: 4 }, + { year: '1993', value: 3.5 }, + { year: '1994', value: 5 }, + { year: '1995', value: 4.9 }, + { year: '1996', value: 6 }, + { year: '1997', value: 7 }, + { year: '1998', value: 9 }, + { year: '1999', value: 13 }, + ], + xField: 'year', + yField: 'value', + color: () => '#f24', + }); + line.render(); + const geometry = line.chart.geometries[0]; + const elements = geometry.elements; + expect(elements[0].shape.attr('stroke')).toBe('#f24'); + line.destroy(); + }); +}); diff --git a/src/adaptor/geometries/base.ts b/src/adaptor/geometries/base.ts index d9090226fc..ea48da4754 100644 --- a/src/adaptor/geometries/base.ts +++ b/src/adaptor/geometries/base.ts @@ -64,8 +64,14 @@ export type GeometryOptions = Geometry & Partial; * @param options * @param field */ -export function getMappingField(o: GeometryOptions, field: 'color' | 'shape' | 'size' | 'style'): string[] { - const { xField, yField, colorField, shapeField, sizeField, styleField, rawFields = [] } = o; +export function getMappingField( + o: GeometryOptions, + field: 'color' | 'shape' | 'size' | 'style' +): { + mappingFields: string[]; + tileMappingFields: string; +} { + const { type, xField, yField, colorField, shapeField, sizeField, styleField, rawFields = [] } = o; let fields = []; @@ -91,7 +97,18 @@ export function getMappingField(o: GeometryOptions, field: 'color' | 'shape' | ' fields.unshift(f); } - return uniq(fields.filter((f) => !!f)); + const mappingFields = uniq(fields.filter((f) => !!f)); + /** + * 修复 line geometry 无拆分时 color 回调错误 + * eg: + * geometry.color(xField, ()=> '#f24') + */ + const tileMappingFields = + type === 'line' && [xField, yField].includes(mappingFields.join('*')) ? '' : mappingFields.join('*'); + return { + mappingFields, + tileMappingFields, + }; } /** @@ -145,8 +162,8 @@ export function geometry(params: Params): Params(params: Params): Params(params: Params): Params(params: Params): Params ({ fill: 'red' })); */ if (isFunction(style)) { - const mappingFields = getMappingField(options, 'style'); - geometry.style(mappingFields.join('*'), getMappingFunction(mappingFields, style)); + const { mappingFields, tileMappingFields } = getMappingField(options, 'style'); + geometry.style(tileMappingFields, getMappingFunction(mappingFields, style)); } else if (isObject(style)) { geometry.style(style); }