From fdfc50bc713a321a3330dfc8204d26876821413a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E9=B9=8F=E5=AE=87?= <9664676+pengyuthon@user.noreply.gitee.com> Date: Tue, 11 Aug 2026 19:00:23 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=95=99=E8=82=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ks_dashboard_graphs.js | 11 +++++++++ .../src/scss/ks_dashboard_ninja_dark.scss | 23 +++++++++++++++++++ .../ks_bullet_chart/ks_bullet_chart.js | 3 +++ .../ks_funnel_chart/ks_funnel_chart.js | 3 +++ .../widgets/ks_graph_view/ks_graph_view.js | 3 +++ .../src/widgets/ks_map_view/ks_map_view.js | 3 +++ 6 files changed, 46 insertions(+) diff --git a/ks_dashboard_ninja/static/src/components/ks_dashboard_graphs/ks_dashboard_graphs.js b/ks_dashboard_ninja/static/src/components/ks_dashboard_graphs/ks_dashboard_graphs.js index 5e58a2b..4730234 100644 --- a/ks_dashboard_ninja/static/src/components/ks_dashboard_graphs/ks_dashboard_graphs.js +++ b/ks_dashboard_ninja/static/src/components/ks_dashboard_graphs/ks_dashboard_graphs.js @@ -439,6 +439,11 @@ export class Ksdashboardgraph extends Component{ if(graph_render){ var root = am5.Root.new(graph_render[0]); + // 夜间模式下统一把 amCharts 默认文字色改为浅色， + // 否则坐标轴/数据标签在深色卡片上看不清。 + if (document.body.classList.contains('ks_body_class')) { + root.interfaceColors.set("text", am5.color(0xf1f5f9)); + } } const theme = item.ks_chart_item_color @@ -1426,6 +1431,9 @@ export class Ksdashboardgraph extends Component{ data.push({"stage":keyValueArray[i][0],"applicants":keyValueArray[i][1]}) } var root = am5.Root.new(funnelRender[0]); + if (document.body.classList.contains('ks_body_class')) { + root.interfaceColors.set("text", am5.color(0xf1f5f9)); + } const theme = item.ks_chart_item_color switch(theme){ case "default": @@ -2216,6 +2224,9 @@ export class Ksdashboardgraph extends Component{ } } const root = am5.Root.new(mapRender[0]); + if (document.body.classList.contains('ks_body_class')) { + root.interfaceColors.set("text", am5.color(0xf1f5f9)); + } root.setThemes([am5themes_Animated.new(root)]); // Create the map chart diff --git a/ks_dashboard_ninja/static/src/scss/ks_dashboard_ninja_dark.scss b/ks_dashboard_ninja/static/src/scss/ks_dashboard_ninja_dark.scss index 5ff3d64..b8a5914 100644 --- a/ks_dashboard_ninja/static/src/scss/ks_dashboard_ninja_dark.scss +++ b/ks_dashboard_ninja/static/src/scss/ks_dashboard_ninja_dark.scss @@ -148,6 +148,29 @@ border-color: #334155 !important; } +// ============================================================ +// 图表内部文字/数字夜间统一改浅色 +// amCharts 5 渲染的坐标轴标签、数据标签、图例等默认是黑色 fill， +// 在深色卡片背景上看不清，统一改成 #f1f5f9。 +// ============================================================ +.ks_body_class .ks_dashboarditem_chart_container { + // 图表标题 + .ks_chart_heading { + color: #f1f5f9 !important; + } + + // amCharts SVG 内所有 text：坐标轴、刻度、柱顶数字、饼图标签等 + svg text { + fill: #f1f5f9 !important; + } + + // amCharts 用 HTML 层渲染的 tooltip / 图例文字 + .am5-html, + .am5-html * { + color: #f1f5f9 !important; + } +} + // ============================================================ // 瓦片/图表卡片右上角操作按钮（复制/编辑/信息/更多） // 夜间模式下这些按钮容易出现重叠、背景刺眼、图标看不清的问题。 diff --git a/ks_dashboard_ninja/static/src/widgets/ks_bullet_chart/ks_bullet_chart.js b/ks_dashboard_ninja/static/src/widgets/ks_bullet_chart/ks_bullet_chart.js index 69e68cf..46ee06f 100644 --- a/ks_dashboard_ninja/static/src/widgets/ks_bullet_chart/ks_bullet_chart.js +++ b/ks_dashboard_ninja/static/src/widgets/ks_bullet_chart/ks_bullet_chart.js @@ -102,6 +102,9 @@ export class ks_bullet_chart extends Component{ } this.root = am5.Root.new(bulletRefEl); + if (document.body.classList.contains('ks_body_class')) { + this.root.interfaceColors.set("text", am5.color(0xf1f5f9)); + } var theme = this.props.record.data.ks_chart_item_color; switch (theme) { diff --git a/ks_dashboard_ninja/static/src/widgets/ks_funnel_chart/ks_funnel_chart.js b/ks_dashboard_ninja/static/src/widgets/ks_funnel_chart/ks_funnel_chart.js index f9fa5c3..0909b15 100644 --- a/ks_dashboard_ninja/static/src/widgets/ks_funnel_chart/ks_funnel_chart.js +++ b/ks_dashboard_ninja/static/src/widgets/ks_funnel_chart/ks_funnel_chart.js @@ -88,6 +88,9 @@ export class ks_funnel_chart extends Component{ data.push({"stage":keyValueArray[i][0],"applicants":keyValueArray[i][1]}) } this.root = am5.Root.new(this.funnelRef.el); + if (document.body.classList.contains('ks_body_class')) { + this.root.interfaceColors.set("text", am5.color(0xf1f5f9)); + } const theme = this.props.record.data.ks_chart_item_color switch(theme){ diff --git a/ks_dashboard_ninja/static/src/widgets/ks_graph_view/ks_graph_view.js b/ks_dashboard_ninja/static/src/widgets/ks_graph_view/ks_graph_view.js index 45cab2e..fd2ade4 100644 --- a/ks_dashboard_ninja/static/src/widgets/ks_graph_view/ks_graph_view.js +++ b/ks_dashboard_ninja/static/src/widgets/ks_graph_view/ks_graph_view.js @@ -126,6 +126,9 @@ export class KsGraphPreview extends Component{ this.root = am5.Root.new(this.graphref.el); + if (document.body.classList.contains('ks_body_class')) { + this.root.interfaceColors.set("text", am5.color(0xf1f5f9)); + } var self =this; const theme = this.props.record.data.ks_chart_item_color diff --git a/ks_dashboard_ninja/static/src/widgets/ks_map_view/ks_map_view.js b/ks_dashboard_ninja/static/src/widgets/ks_map_view/ks_map_view.js index 3d4f0ed..6943807 100644 --- a/ks_dashboard_ninja/static/src/widgets/ks_map_view/ks_map_view.js +++ b/ks_dashboard_ninja/static/src/widgets/ks_map_view/ks_map_view.js @@ -135,6 +135,9 @@ export class KsMapPreview extends Component { } this.root = am5.Root.new(this.mapContainerRef.el); + if (document.body.classList.contains('ks_body_class')) { + this.root.interfaceColors.set("text", am5.color(0xf1f5f9)); + } // Set themes this.root.setThemes([am5themes_Animated.new(this.root)]);