{"id":2070,"date":"2026-07-24T09:24:14","date_gmt":"2026-07-24T09:24:14","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/grouped-column-chart-multi-series-data-and-spacing-guide\/"},"modified":"2026-07-24T09:24:14","modified_gmt":"2026-07-24T09:24:14","slug":"grouped-column-chart-multi-series-data-and-spacing-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/grouped-column-chart-multi-series-data-and-spacing-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 c\u1ed9t nh\u00f3m: D\u1eef li\u1ec7u \u0111a chu\u1ed7i v\u00e0 kho\u1ea3ng c\u00e1ch"},"content":{"rendered":"

Trong ph\u00e2n t\u00edch d\u1eef li\u1ec7u v\u00e0 b\u00e1o c\u00e1o kinh doanh, Bi\u1ec3u \u0111\u1ed3 c\u1ed9t nh\u00f3m<\/strong> (c\u0169ng \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 Bi\u1ec3u \u0111\u1ed3 c\u1ed9t nh\u00f3m) l\u00e0 c\u00f4ng c\u1ee5 ch\u00ednh \u0111\u1ec3 so s\u00e1nh song song qua nhi\u1ec1u chi\u1ec1u. Trong khi bi\u1ec3u \u0111\u1ed3 c\u1ed9t ti\u00eau chu\u1ea9n \u0111\u00e1nh gi\u00e1 m\u1ed9t ch\u1ec9 s\u1ed1 duy nh\u1ea5t cho m\u1ed7i danh m\u1ee5c, bi\u1ec3u \u0111\u1ed3 c\u1ed9t nh\u00f3m \u0111\u1eb7t c\u00e1c t\u1eadp d\u1eef li\u1ec7u li\u00ean quan c\u1ea1nh nhau trong c\u00f9ng m\u1ed9t nh\u00f3m danh m\u1ee5c. \u0110i\u1ec1u n\u00e0y cho ph\u00e9p \u0111\u00e1nh gi\u00e1 tr\u1ef1c quan t\u1ee9c th\u00ec v\u1ec1 xu h\u01b0\u1edbng theo th\u1eddi gian, hi\u1ec7u su\u1ea5t gi\u1eefa c\u00e1c \u0111\u1ed9i nh\u00f3m, ho\u1eb7c hi\u1ec7u su\u1ea5t \u0111a ch\u1ec9 s\u1ed1<\/em>.<\/p>\n

C\u01a1 ch\u1ebf c\u1ee7a c\u00e1c c\u1ed9t nh\u00f3m<\/h2>\n

Bi\u1ec3u \u0111\u1ed3 c\u1ed9t nh\u00f3m ho\u1ea1t \u0111\u1ed9ng tr\u00ean m\u1ed9t h\u1ec7 t\u1ecda \u0111\u1ed9 chung, trong \u0111\u00f3 tr\u1ee5c ho\u00e0nh \u0111\u1ea1i di\u1ec7n cho c\u00e1c danh m\u1ee5c r\u1eddi r\u1ea1c v\u00e0 tr\u1ee5c tung x\u1eed l\u00fd c\u00e1c gi\u00e1 tr\u1ecb li\u00ean t\u1ee5c. Vi\u1ec7c nh\u00f3m \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n b\u1eb1ng c\u00e1ch khai b\u00e1o nhi\u1ec1u \u0111\u1ed1i t\u01b0\u1ee3ng chu\u1ed7i chia s\u1ebb c\u00f9ng m\u1ed9t s\u1ef1 s\u1eafp x\u1ebfp danh m\u1ee5c ch\u00ednh x\u00e1c tr\u00ean tr\u1ee5c ho\u00e0nh. B\u1ed9 x\u1eed l\u00fd b\u1ed1 c\u1ee5c s\u1ebd t\u1ef1 \u0111\u1ed9ng t\u00ednh to\u00e1n \u0111\u1ed9 l\u1ec7ch c\u1ea7n thi\u1ebft v\u00e0 hi\u1ec3n th\u1ecb t\u1eebng chu\u1ed7i c\u1ea1nh nhau trong kh\u1ed1i danh m\u1ee5c t\u01b0\u01a1ng \u1ee9ng.<\/p>\n

1. C\u00e0i \u0111\u1eb7t c\u01a1 b\u1ea3n<\/h3>\n

\u0110\u1ec3 x\u00e2y d\u1ef1ng bi\u1ec3u \u0111\u1ed3 c\u1ed9t nh\u00f3m, h\u00e3y x\u00e1c \u0111\u1ecbnh m\u1ed9t tr\u1ee5c ph\u00e2n lo\u1ea1i duy nh\u1ea5t v\u00e0 cung c\u1ea5p nhi\u1ec1u \u0111\u1ed1i t\u01b0\u1ee3ng chu\u1ed7i v\u1edbi type: 'bar'<\/code>:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n ECharts<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit ECharts in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
option = {\r\n    tooltip: {\r\n        trigger: 'axis',\r\n        axisPointer: { type: 'shadow' }\r\n    },\r\n    legend: {\r\n        data: ['Doanh thu 2025', 'Doanh thu 2026']\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Q1', 'Q2', 'Q3', 'Q4']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Doanh thu 2025',\r\n            type: 'bar',\r\n            data: [320, 332, 301, 334]\r\n        },\r\n        {\r\n            name: 'Doanh thu 2026',\r\n            type: 'bar',\r\n            data: [220, 182, 191, 234]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
C\u00e1c k\u1ef9 thu\u1eadt c\u1ea5u tr\u00fac n\u00e2ng cao<\/h2>\n
Vi\u1ec7c th\u00eam chu\u1ed7i th\u1ee9 ba ho\u1eb7c th\u1ee9 t\u01b0 s\u1ebd l\u00e0m t\u0103ng \u0111\u1ed9 \u0111\u1eadm \u0111\u1eb7c c\u1ee7a bi\u1ec3u \u0111\u1ed3. \u0110\u1ec3 duy tr\u00ec s\u1ef1 r\u00f5 r\u00e0ng, b\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh tinh t\u1ebf ki\u1ec3u d\u00e1ng chu\u1ed7i, kho\u1ea3ng c\u00e1ch b\u1ed1 c\u1ee5c v\u00e0 c\u00e1c d\u1ea5u hi\u1ec7u th\u1ecb gi\u00e1c.<\/p>\n
1. \u0110\u1ecbnh d\u1ea1ng t\u00f9y ch\u1ec9nh gi\u1eefa c\u00e1c nh\u00f3m<\/h3>\n
\u00c1p d\u1ee5ng m\u00e0u s\u1eafc ri\u00eang bi\u1ec7t, g\u00f3c bo tr\u00f2n ho\u1eb7c ki\u1ec3u d\u00e1ng m\u1ee5c t\u00f9y ch\u1ec9nh gi\u00fap d\u1ec5 d\u00e0ng ph\u00e2n bi\u1ec7t c\u00e1c nh\u00f3m ri\u00eang l\u1ebb trong c\u00e1c bi\u1ec3u \u0111\u1ed3 d\u00e0y \u0111\u1eb7c:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    legend: {\r\n        data: ['S\u1ea3n ph\u1ea9m A', 'S\u1ea3n ph\u1ea9m B', 'S\u1ea3n ph\u1ea9m C']\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['B\u1eafc M\u1ef9', 'Ch\u00e2u \u00c2u', 'Ch\u00e2u \u00c1 Th\u00e1i B\u00ecnh D\u01b0\u01a1ng']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'S\u1ea3n ph\u1ea9m A',\r\n            type: 'bar',\r\n            data: [150, 230, 224],\r\n            itemStyle: {\r\n                color: '#5470c6',\r\n                borderRadius: [4, 4, 0, 0]\r\n            }\r\n        },\r\n        {\r\n            name: 'S\u1ea3n ph\u1ea9m B',\r\n            type: 'bar',\r\n            data: [180, 200, 210],\r\n            itemStyle: {\r\n                color: '#91cc75',\r\n                borderRadius: [4, 4, 0, 0]\r\n            }\r\n        },\r\n        {\r\n            name: 'S\u1ea3n ph\u1ea9m C',\r\n            type: 'bar',\r\n            data: [120, 140, 190],\r\n            itemStyle: {\r\n                color: '#fac858',\r\n                borderRadius: [4, 4, 0, 0]\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Tinh ch\u1ec9nh b\u1ed1 c\u1ee5c v\u00e0 kho\u1ea3ng c\u00e1ch<\/h2>\n
Kho\u1ea3ng c\u00e1ch l\u00e0 y\u1ebfu t\u1ed1 then ch\u1ed1t khi l\u00e0m vi\u1ec7c v\u1edbi c\u00e1c c\u1ed9t nh\u00f3m. Ki\u1ec3m so\u00e1t kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c c\u1ed9t trong c\u00f9ng m\u1ed9t nh\u00f3m so v\u1edbi kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c nh\u00f3m danh m\u1ee5c ri\u00eang bi\u1ec7t gi\u00fap ng\u0103n ng\u1eeba s\u1ef1 l\u1ed9n x\u1ed9n th\u1ecb gi\u00e1c.<\/p>\n
1. Kho\u1ea3ng c\u00e1ch n\u1ed9i b\u1ed9 so v\u1edbi kho\u1ea3ng c\u00e1ch danh m\u1ee5c<\/h3>\n
S\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh kho\u1ea3ng c\u00e1ch \u0111\u1ec3 c\u00e2n b\u1eb1ng \u0111\u1ed9 \u0111\u1eadm \u0111\u1eb7c b\u1ed1 c\u1ee5c:<\/p>\n