diff --git a/__tests__/integration/snapshots/static/mockSquareRadar.svg b/__tests__/integration/snapshots/static/mockSquareRadar.svg new file mode 100644 index 0000000000..ebfc43f62c --- /dev/null +++ b/__tests__/integration/snapshots/static/mockSquareRadar.svg @@ -0,0 +1,737 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 0 + + + + + + + 20 + + + + + + + 40 + + + + + + + 60 + + + + + + + 80 + + + + + + + + + score + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Design + + + + + + + Development + + + + + + + Marketing + + + + + + + Users + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts index 2c270d41b0..2a36c3bd6e 100644 --- a/__tests__/plots/static/index.ts +++ b/__tests__/plots/static/index.ts @@ -316,3 +316,4 @@ export { titanicPointPackSharedDataPadding } from './titanic-point-pack-shared-d export { scoreByItemAreaBasicRadar } from './score-by-item-area-basic-radar'; export { scoreByItemAreaLineRadar } from './score-by-item-area-line-radar'; export { mockComplexRadar } from './mock-complex-radar'; +export { mockSquareRadar } from './mock-square-radar'; diff --git a/__tests__/plots/static/mock-square-radar.ts b/__tests__/plots/static/mock-square-radar.ts new file mode 100644 index 0000000000..60c06b12e7 --- /dev/null +++ b/__tests__/plots/static/mock-square-radar.ts @@ -0,0 +1,45 @@ +import { G2Spec } from '../../../src'; + +const data = [ + { item: 'Design', type: 'a', score: 70 }, + { item: 'Development', type: 'a', score: 60 }, + { item: 'Marketing', type: 'a', score: 50 }, + { item: 'Users', type: 'a', score: 40 }, +]; + +export function mockSquareRadar(): G2Spec { + return { + type: 'line', + data, + width: 500, + height: 500, + encode: { x: 'item', y: 'score' }, + axis: { + y: { + titleOpacity: '0', + gridConnect: 'line', + gridStrokeWidth: 1, + gridLineDash: [0, 0], + gridAreaFill: 'rgba(0, 0, 0, 0.04)', + }, + x: { + grid: true, + zIndex: 1, + title: false, + gridStrokeWidth: 1, + gridLineDash: null, + }, + }, + coordinate: { + type: 'polar', + startAngle: (-Math.PI * 3) / 4, + endAngle: (Math.PI * 5) / 4, + }, + scale: { + x: { padding: 0.5, align: 0 }, + y: { domainMin: 0, domainMax: 80 }, + }, + style: { zIndex: 0, strokeWidth: 5, lineJoin: 'round' }, + tooltip: false, + }; +} diff --git a/site/examples/general/radar/demo/meta.json b/site/examples/general/radar/demo/meta.json index 892d00fd54..657a023e8f 100644 --- a/site/examples/general/radar/demo/meta.json +++ b/site/examples/general/radar/demo/meta.json @@ -51,6 +51,14 @@ "en": "Radial Area Chart" }, "screenshot": "https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*-m-2QolJUt0AAAAAAAAAAAAADmJ7AQ" + }, + { + "filename": "square-radar.ts", + "title": { + "zh": "方形雷达图", + "en": "Square radar Chart" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JBvBT5c5_2sAAAAAAAAAAAAADmJ7AQ/original" } ] } diff --git a/site/examples/general/radar/demo/square-radar.ts b/site/examples/general/radar/demo/square-radar.ts new file mode 100644 index 0000000000..ea3861392c --- /dev/null +++ b/site/examples/general/radar/demo/square-radar.ts @@ -0,0 +1,51 @@ +import { Chart } from '@antv/g2'; +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +chart.coordinate({ + type: 'polar', + startAngle: (-Math.PI * 3) / 4, + endAngle: (Math.PI * 5) / 4, +}); + +chart + .line() + .data([ + { item: 'Design', type: 'a', score: 70 }, + { item: 'Development', type: 'a', score: 60 }, + { item: 'Marketing', type: 'a', score: 50 }, + { item: 'Users', type: 'a', score: 40 }, + ]) + .encode('x', 'item') + .encode('y', 'score') + .scale('x', { + padding: 0.5, + align: 0, + }) + .scale('y', { + domainMin: 0, + domainMax: 80, + }) + .style({ + zIndex: 0, + strokeWidth: 5, + lineJoin: 'round', + }) + .axis('x', { + grid: true, + zIndex: 1, + title: false, + gridStrokeWidth: 1, + gridLineDash: null, + }) + .axis('y', { + titleOpacity: '0', + gridConnect: 'line', + gridStrokeWidth: 1, + gridLineDash: [0, 0], + gridAreaFill: 'rgba(0, 0, 0, 0.04)', + }); + +chart.render(); diff --git a/src/runtime/plot.ts b/src/runtime/plot.ts index ee30936a5b..f63f2fbd95 100644 --- a/src/runtime/plot.ts +++ b/src/runtime/plot.ts @@ -721,7 +721,8 @@ function initializeState( const { name } = descriptor; const scale = useRelationScale(descriptor, library); scales.push(scale); - // Delivery the scale of axisX to the AxisY, in order to calculate the angle of axisY component when rendering radar chart + // Delivery the scale of axisX to the AxisY, + // in order to calculate the angle of axisY component when rendering radar chart. if (name === 'y') { scale.update({ ...scale.getOptions(),