diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 7b174953..6146b795 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -728,6 +728,8 @@
"line": "Line",
"pie": "Pie"
},
+ "hide_label": "Hide Label",
+ "show_label": "Show Label",
"sort_asc": "Ascending",
"sort_desc": "Descending",
"sort_none": "No Sort",
diff --git a/frontend/src/i18n/ko-KR.json b/frontend/src/i18n/ko-KR.json
index f2f3c209..1e2acd31 100644
--- a/frontend/src/i18n/ko-KR.json
+++ b/frontend/src/i18n/ko-KR.json
@@ -728,6 +728,8 @@
"line": "선 차트",
"pie": "원형 차트"
},
+ "hide_label": "라벨 숨기기",
+ "show_label": "라벨 표시",
"sort_asc": "오름차순",
"sort_desc": "내림차순",
"sort_none": "정렬 안 함",
diff --git a/frontend/src/i18n/zh-CN.json b/frontend/src/i18n/zh-CN.json
index b3a7d6dd..10b66f44 100644
--- a/frontend/src/i18n/zh-CN.json
+++ b/frontend/src/i18n/zh-CN.json
@@ -728,6 +728,8 @@
"line": "折线图",
"pie": "饼图"
},
+ "hide_label": "隐藏标签",
+ "show_label": "显示标签",
"sort_asc": "升序",
"sort_desc": "降序",
"sort_none": "不排序",
@@ -930,4 +932,4 @@
"to_doc": "查看 API",
"trigger_limit": "最多支持创建 {0} 个 API Key"
}
-}
\ No newline at end of file
+}
diff --git a/frontend/src/views/chat/chat-block/ChartBlock.vue b/frontend/src/views/chat/chat-block/ChartBlock.vue
index 37f6e9a6..54b595de 100644
--- a/frontend/src/views/chat/chat-block/ChartBlock.vue
+++ b/frontend/src/views/chat/chat-block/ChartBlock.vue
@@ -396,9 +396,8 @@ watch(
-
+
-import { computed, nextTick, onMounted, onUnmounted } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
import { getChartInstance } from '@/views/chat/component/index.ts'
import type { BaseChart, ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
import { useEmitt } from '@/utils/useEmitt.ts'
@@ -63,6 +63,7 @@ const axis = computed(() => {
let chartInstance: BaseChart | undefined
+function renderChart() {
chartInstance = getChartInstance(params.type, chartId.value)
if (chartInstance) {
chartInstance.showLabel = params.showLabel
diff --git a/frontend/src/views/chat/component/charts/Bar.ts b/frontend/src/views/chat/component/charts/Bar.ts
index 70cc70f2..e3597dfd 100644
--- a/frontend/src/views/chat/component/charts/Bar.ts
+++ b/frontend/src/views/chat/component/charts/Bar.ts
@@ -131,27 +131,27 @@ export class Bar extends BaseG2Chart {
},
labels: this.showLabel
? [
- {
- text: (data: any) => {
- const value = data[y[0].value]
- if (value === undefined || value === null) {
- return ''
- }
- return `${value}${_data.isPercent ? '%' : ''}`
+ {
+ text: (data: any) => {
+ const value = data[y[0].value]
+ if (value === undefined || value === null) {
+ return ''
+ }
+ return `${value}${_data.isPercent ? '%' : ''}`
+ },
+ position: (data: any) => {
+ if (data[y[0].value] < 0) {
+ return 'left'
+ }
+ return 'right'
+ },
+ transform: [
+ { type: 'contrastReverse' },
+ { type: 'exceedAdjust' },
+ { type: 'overlapHide' },
+ ],
},
- position: (data: any) => {
- if (data[y[0].value] < 0) {
- return 'left'
- }
- return 'right'
- },
- transform: [
- { type: 'contrastReverse' },
- { type: 'exceedAdjust' },
- { type: 'overlapHide' },
- ],
- },
- ]
+ ]
: [],
} as G2Spec
diff --git a/frontend/src/views/chat/component/charts/Column.ts b/frontend/src/views/chat/component/charts/Column.ts
index c2034cd5..7504cfa2 100644
--- a/frontend/src/views/chat/component/charts/Column.ts
+++ b/frontend/src/views/chat/component/charts/Column.ts
@@ -122,27 +122,27 @@ export class Column extends BaseG2Chart {
},
labels: this.showLabel
? [
- {
- text: (data: any) => {
- const value = data[y[0].value]
- if (value === undefined || value === null) {
- return ''
- }
- return `${value}${_data.isPercent ? '%' : ''}`
+ {
+ text: (data: any) => {
+ const value = data[y[0].value]
+ if (value === undefined || value === null) {
+ return ''
+ }
+ return `${value}${_data.isPercent ? '%' : ''}`
+ },
+ position: (data: any) => {
+ if (data[y[0].value] < 0) {
+ return 'bottom'
+ }
+ return 'top'
+ },
+ transform: [
+ { type: 'contrastReverse' },
+ { type: 'exceedAdjust' },
+ { type: 'overlapHide' },
+ ],
},
- position: (data: any) => {
- if (data[y[0].value] < 0) {
- return 'bottom'
- }
- return 'top'
- },
- transform: [
- { type: 'contrastReverse' },
- { type: 'exceedAdjust' },
- { type: 'overlapHide' },
- ],
- },
- ]
+ ]
: [],
} as G2Spec
diff --git a/frontend/src/views/chat/component/charts/Line.ts b/frontend/src/views/chat/component/charts/Line.ts
index 87d48c3b..b110ebfd 100644
--- a/frontend/src/views/chat/component/charts/Line.ts
+++ b/frontend/src/views/chat/component/charts/Line.ts
@@ -88,25 +88,25 @@ export class Line extends BaseG2Chart {
},
labels: this.showLabel
? [
- {
- text: (data: any) => {
- const value = data[y[0].value]
- if (value === undefined || value === null) {
- return ''
- }
- return `${value}${_data.isPercent ? '%' : ''}`
+ {
+ text: (data: any) => {
+ const value = data[y[0].value]
+ if (value === undefined || value === null) {
+ return ''
+ }
+ return `${value}${_data.isPercent ? '%' : ''}`
+ },
+ style: {
+ dx: -10,
+ dy: -12,
+ },
+ transform: [
+ { type: 'contrastReverse' },
+ { type: 'exceedAdjust' },
+ { type: 'overlapHide' },
+ ],
},
- style: {
- dx: -10,
- dy: -12,
- },
- transform: [
- { type: 'contrastReverse' },
- { type: 'exceedAdjust' },
- { type: 'overlapHide' },
- ],
- },
- ]
+ ]
: [],
tooltip: (data: any) => {
if (series.length > 0) {
diff --git a/frontend/src/views/chat/component/charts/Pie.ts b/frontend/src/views/chat/component/charts/Pie.ts
index fb65ce5e..bc729f73 100644
--- a/frontend/src/views/chat/component/charts/Pie.ts
+++ b/frontend/src/views/chat/component/charts/Pie.ts
@@ -43,14 +43,16 @@ export class Pie extends BaseG2Chart {
color: { position: 'bottom', layout: { justifyContent: 'center' } },
},
animate: { enter: { type: 'waveIn' } },
- labels: [
- {
- position: 'spider',
- text: (data: any) => {
- return `${data[series[0].value]}: ${data[y[0].value]}${_data.isPercent ? '%' : ''}`
- },
- },
- ],
+ labels: this.showLabel
+ ? [
+ {
+ position: 'spider',
+ text: (data: any) => {
+ return `${data[series[0].value]}: ${data[y[0].value]}${_data.isPercent ? '%' : ''}`
+ },
+ },
+ ]
+ : [],
tooltip: {
title: (data: any) => data[series[0].value],
items: [