diff --git a/site/examples/statistics/dual-axes/demo/grouped-stacked-column-line.js b/site/examples/statistics/dual-axes/demo/grouped-stacked-column-line.js new file mode 100644 index 0000000000..499180935f --- /dev/null +++ b/site/examples/statistics/dual-axes/demo/grouped-stacked-column-line.js @@ -0,0 +1,81 @@ +import { DualAxes } from '@ant-design/plots'; +import React from 'react'; +import { createRoot } from 'react-dom'; + +const DemoDualAxes = () => { + const uvBillData = [ + { time: '2025-03', value: 350, group: 'uv', type: 'a' }, + { time: '2025-04', value: 900, group: 'uv', type: 'a' }, + { time: '2025-05', value: 300, group: 'uv', type: 'a' }, + { time: '2025-06', value: 450, group: 'uv', type: 'a' }, + { time: '2025-07', value: 470, group: 'uv', type: 'a' }, + + { time: '2025-03', value: 350, group: 'uv', type: 'b' }, + { time: '2025-04', value: 900, group: 'uv', type: 'b' }, + { time: '2025-05', value: 300, group: 'uv', type: 'b' }, + { time: '2025-06', value: 450, group: 'uv', type: 'b' }, + { time: '2025-07', value: 470, group: 'uv', type: 'b' }, + + { time: '2025-03', value: 220, group: 'bill', type: 'c' }, + { time: '2025-04', value: 300, group: 'bill', type: 'c' }, + { time: '2025-05', value: 250, group: 'bill', type: 'c' }, + { time: '2025-06', value: 220, group: 'bill', type: 'c' }, + { time: '2025-07', value: 362, group: 'bill', type: 'c' }, + ]; + + const transformData = [ + { time: '2025-03', count: 800 }, + { time: '2025-04', count: 600 }, + { time: '2025-05', count: 400 }, + { time: '2025-06', count: 380 }, + { time: '2025-07', count: 220 }, + ]; + + const config = { + xField: 'time', + legend: { + color: { + itemMarker: (datum) => { + if (datum === 'count') { + return 'dash'; + } else { + return 'square'; + } + }, + }, + }, + children: [ + { + data: uvBillData, + type: 'interval', + yField: 'value', + colorField: 'type', + seriesField: 'group', + stack: { + groupBy: ['x', 'series'], + }, + group: true, + tooltip: { + items: [ + (datum) => { + return { + name: `${datum.group}_${datum.type}`, + value: datum.value, + }; + }, + ], + }, + }, + { + data: transformData, + type: 'line', + yField: 'count', + style: { lineWidth: 2 }, + axis: { y: { position: 'right' } }, + }, + ], + }; + return ; +}; + +createRoot(document.getElementById('container')).render(); diff --git a/site/examples/statistics/dual-axes/demo/meta.json b/site/examples/statistics/dual-axes/demo/meta.json index e46dd848b5..3d143c237e 100644 --- a/site/examples/statistics/dual-axes/demo/meta.json +++ b/site/examples/statistics/dual-axes/demo/meta.json @@ -171,6 +171,14 @@ "en": "Grouped column multi line" }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*xzh4RYzYTFcAAAAAAAAAAAAAARQnAQ" + }, + { + "filename": "grouped-stacked-column-line.js", + "title": { + "zh": "分组堆叠柱线图表", + "en": "Grouped stacked column line" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*hhUWS6yU84YAAAAAQWAAAAgAemJ7AQ/fmt.avif" } ] }