fix(图表): 修复堆叠柱条图自定义图例顺序和自定义排序效果冲突 #17649

core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts

@@ -497,6 +497,43 @@ export class StackBar extends Bar {
   }
 
   protected configColor(chart: Chart, options: ColumnOptions): ColumnOptions {
+    const customStyle = parseJson(chart.customStyle)
+    const { sort } = customStyle.legend
+    const extStack = chart.extStack[0]
+    if ((!sort || sort === 'none') && extStack?.customSort?.length > 0) {
+      // 图例自定义排序
+      const sort = extStack.customSort ?? []
+      if (sort?.length) {
+        // 用值域限定排序，有可能出现新数据但是未出现在图表上，所以这边要遍历一下子维度，加到后面，让新数据显示出来
+        const data = options.data
+        const cats =
+          data?.reduce((p, n) => {
+            const cat = n['category']
+            if (cat && !p.includes(cat)) {
+              p.push(cat)
+            }
+            return p
+          }, []) || []
+        const values = sort.reduce((p, n) => {
+          if (cats.includes(n)) {
+            const index = cats.indexOf(n)
+            if (index !== -1) {
+              cats.splice(index, 1)
+            }
+            p.push(n)
+          }
+          return p
+        }, [])
+        cats.length > 0 && values.push(...cats)
+        options.meta = {
+          ...options.meta,
+          category: {
+            type: 'cat',
+            values
+          }
+        }
+      }
+    }
     return this.configStackColor(chart, options)
   }
 
@@ -533,41 +570,6 @@ export class StackBar extends Bar {
       return optionTmp
     }
     const extStack = chart.extStack[0]
-    if (extStack?.customSort?.length > 0) {
-      // 图例自定义排序
-      const sort = extStack.customSort ?? []
-      if (sort?.length) {
-        // 用值域限定排序，有可能出现新数据但是未出现在图表上，所以这边要遍历一下子维度，加到后面，让新数据显示出来
-        const data = optionTmp.data
-        const cats =
-          data?.reduce((p, n) => {
-            const cat = n['category']
-            if (cat && !p.includes(cat)) {
-              p.push(cat)
-            }
-            return p
-          }, []) || []
-        const values = sort.reduce((p, n) => {
-          if (cats.includes(n)) {
-            const index = cats.indexOf(n)
-            if (index !== -1) {
-              cats.splice(index, 1)
-            }
-            p.push(n)
-          }
-          return p
-        }, [])
-        cats.length > 0 && values.push(...cats)
-        optionTmp.meta = {
-          ...optionTmp.meta,
-          category: {
-            type: 'cat',
-            values
-          }
-        }
-      }
-    }
-
     const customStyle = parseJson(chart.customStyle)
     let size
     if (customStyle && customStyle.legend) {

core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts

@@ -445,6 +445,44 @@ export class HorizontalStackBar extends HorizontalBar {
     }
   }
   protected configColor(chart: Chart, options: BarOptions): BarOptions {
+    const customStyle = parseJson(chart.customStyle)
+    const { sort } = customStyle.legend
+    const extStack = chart.extStack[0]
+    if ((!sort || sort === 'none') && extStack?.customSort?.length > 0) {
+      // 图例自定义排序
+      const sort = extStack.customSort ?? []
+      if (sort?.length) {
+        // 用值域限定排序，有可能出现新数据但是未出现在图表上，所以这边要遍历一下子维度，加到后面，让新数据显示出来
+        const data = options.data
+        const cats =
+          data?.reduce((p, n) => {
+            const cat = n['category']
+            if (cat && !p.includes(cat)) {
+              p.push(cat)
+            }
+            return p
+          }, []) || []
+        const values = sort.reduce((p, n) => {
+          if (cats.includes(n)) {
+            const index = cats.indexOf(n)
+            if (index !== -1) {
+              cats.splice(index, 1)
+            }
+            p.push(n)
+          }
+          return p
+        }, [])
+        cats.length > 0 && values.push(...cats)
+        options.meta = {
+          ...options.meta,
+          category: {
+            type: 'cat',
+            values
+          }
+        }
+      }
+    }
+
     return this.configStackColor(chart, options)
   }
   public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] {
@@ -484,40 +522,6 @@ export class HorizontalStackBar extends HorizontalBar {
       return optionTmp
     }
     const extStack = chart.extStack[0]
-    if (extStack?.customSort?.length > 0) {
-      // 图例自定义排序
-      const sort = extStack.customSort ?? []
-      if (sort?.length) {
-        // 用值域限定排序，有可能出现新数据但是未出现在图表上，所以这边要遍历一下子维度，加到后面，让新数据显示出来
-        const data = optionTmp.data
-        const cats =
-          data?.reduce((p, n) => {
-            const cat = n['category']
-            if (cat && !p.includes(cat)) {
-              p.push(cat)
-            }
-            return p
-          }, []) || []
-        const values = sort.reduce((p, n) => {
-          if (cats.includes(n)) {
-            const index = cats.indexOf(n)
-            if (index !== -1) {
-              cats.splice(index, 1)
-            }
-            p.push(n)
-          }
-          return p
-        }, [])
-        cats.length > 0 && values.push(...cats)
-        optionTmp.meta = {
-          ...optionTmp.meta,
-          category: {
-            type: 'cat',
-            values
-          }
-        }
-      }
-    }
 
     const customStyle = parseJson(chart.customStyle)
     let size

core/core-frontend/src/views/chart/components/js/util.ts

@@ -932,6 +932,10 @@ export function getStackColor<O extends PickOptions = Options>(chart: Chart, opt
     const seriesSet = new Set()
     data?.forEach(d => d.category !== null && seriesSet.add(d.category))
     const tmp = [...seriesSet]
+    const values = options.meta?.category?.values
+    if (values?.length) {
+      tmp.sort((a, b) => values.indexOf(a) - values.indexOf(b))
+    }
     tmp.forEach((c, i) => {
       const curAxisColor = seriesMap[c as string]
       if (curAxisColor) {