如何在Highcharts提示框中实现点(.)作为千位分隔符？

需求：希望Highcharts提示框（tooltip）使用点(.)作为千位分隔符，尝试配置'lang': { 'thousandsSep': '.' }以及使用point.y:,.2f格式化，但tooltip仍以空格作为千位分隔符，未达到预期效果。

相关实现代码：

from highcharts_core.chart import Chart
as_dict = {
    'chart': {
        'type': 'column',
        'style': {
            "fontSize": "1.7rem",
            'fontFamily': 'Helvetica'
        },
        'height': 600
    },
    'title': {
        'text': 'Major trophies for some English teams',
        'align': 'center'
    },
    'xAxis': {
        'categories': df_chart_1.index.to_list(),
        'lineColor': 'white'  # 原代码拼写错误，应为white
    },
    'yAxis': [{
        'title': {
            'text': 'Count trophies'
        },
        'stackLabels': {
            'enabled': False  # 原代码重复定义stackLabels，保留最后一个即可
        }
    },{
        'min': -3,
        'title': {
            'text': 'Additional Data'
        },
        'labels': {
            'format': '{value}%',
        },
        'opposite': True
    }],
    'legend': {
        'align': 'center',
        'layout': 'horizontal',
        'verticalAlign': 'bottom',
        'backgroundColor': 'white',
        'borderColor': '#CCC',
        'borderWidth': 1,
        'shadow': False,
    },
    'tooltip': {
        'shared': False,
        'hideDelay':10
    },
    'plotOptions': {
        'column': {
            'stacking': 'normal',
            'dataLabels': {
                'enabled': False,
                'formatter': "function() { return this.y.toFixed(2); }"
            },
            'tooltip': {
                'headerFormat': '<b>{point.x}</b><br/>',
                'pointFormat': '{series.name}: {point.y:,.2f} ({point.percentage:.1f}%)<br/>',
                'usehtml': True
            }
        },
        'spline': {
            'dataLabels': {
                'enabled': True,
                'formatter': "function() { return this.y.toFixed(2); }"
            },
            'tooltip': {
                'headerFormat': '<b>{point.x}</b><br/>',
                'pointFormat': '{series.name}: {point.y:,.2f}<br/>',
            }
        },
        'series': {
            'stickyTracking': False
        }
    },
    'series': [{
        'name': 'Nợ nhóm 2',
        'data': df_chart_1[748].to_list(),
        'color':'#C6DBD0',
        'visible': False
    }, {
        'name': 'Nợ nhóm 3',
        'data': df_chart_1[749].to_list(),
        'color':'#C6DBD0'
    }, {
        'name': 'Nợ nhóm 4',
        'data': df_chart_1[750].to_list(),
        'color':'#9ECBED'
    }, {
        'name': 'Nợ nhóm 5',
        'data': df_chart_1[751].to_list(),
        'color':'#3C97DA'
    }, {
        'type': 'spline',
        'yAxis': 1,
        'name': 'Tỷ lệ nợ xấu',
        'data': df_chart_1['Tỷ lệ nợ xấu'].to_list(),
    }],
    'lang': {
        'thousandsSep': '\u002C'
    },
}

chart = Chart(options = as_dict)
chart.display()

解决方案 #

1. 修正lang配置 #

同时指定千位分隔符和小数分隔符，确保格式规则统一：

'lang': {
    'thousandsSep': '.',  # 千位用点
    'decimalPoint': ','   # 小数用逗号，匹配格式逻辑
}

2. 使用formatter函数替代pointFormat #

直接使用point.y:,.2f不会自动读取lang配置，改用Highcharts内置的numberFormat函数格式化数值，确保遵循lang中的分隔符设置：

修改column的tooltip配置：

'tooltip': {
    'headerFormat': '<b>{point.x}</b><br/>',
    'formatter': """function() {
        return this.series.name + ': ' + Highcharts.numberFormat(this.y, 2) + ' (' + Highcharts.numberFormat(this.percentage, 1) + '%)<br/>';
    }""",
    'usehtml': True
}

修改spline的tooltip配置：

'tooltip': {
    'headerFormat': '<b>{point.x}</b><br/>',
    'formatter': """function() {
        return this.series.name + ': ' + Highcharts.numberFormat(this.y, 2) + '<br/>';
    }"""
}

Highcharts.numberFormat参数说明：numberFormat(number, decimals)，其中decimals为保留小数位数，函数会自动应用lang中配置的千位和小数分隔符。

3. 修正代码中的拼写与冗余错误 #

• 原代码xAxis.lineColor写成while，改为white
• yAxis中重复定义stackLabels，保留一个即可

修改后的完整代码片段 #

from highcharts_core.chart import Chart
as_dict = {
    'chart': {
        'type': 'column',
        'style': {
            "fontSize": "1.7rem",
            'fontFamily': 'Helvetica'
        },
        'height': 600
    },
    'title': {
        'text': 'Major trophies for some English teams',
        'align': 'center'
    },
    'xAxis': {
        'categories': df_chart_1.index.to_list(),
        'lineColor': 'white'
    },
    'yAxis': [{
        'title': {
            'text': 'Count trophies'
        },
        'stackLabels': {
            'enabled': False
        }
    },{
        'min': -3,
        'title': {
            'text': 'Additional Data'
        },
        'labels': {
            'format': '{value}%',
        },
        'opposite': True
    }],
    'legend': {
        'align': 'center',
        'layout': 'horizontal',
        'verticalAlign': 'bottom',
        'backgroundColor': 'white',
        'borderColor': '#CCC',
        'borderWidth': 1,
        'shadow': False,
    },
    'tooltip': {
        'shared': False,
        'hideDelay':10
    },
    'plotOptions': {
        'column': {
            'stacking': 'normal',
            'dataLabels': {
                'enabled': False,
                'formatter': "function() { return this.y.toFixed(2); }"
            },
            'tooltip': {
                'headerFormat': '<b>{point.x}</b><br/>',
                'formatter': """function() {
                    return this.series.name + ': ' + Highcharts.numberFormat(this.y, 2) + ' (' + Highcharts.numberFormat(this.percentage, 1) + '%)<br/>';
                }""",
                'usehtml': True
            }
        },
        'spline': {
            'dataLabels': {
                'enabled': True,
                'formatter': "function() { return this.y.toFixed(2); }"
            },
            'tooltip': {
                'headerFormat': '<b>{point.x}</b><br/>',
                'formatter': """function() {
                    return this.series.name + ': ' + Highcharts.numberFormat(this.y, 2) + '<br/>';
                }"""
            }
        },
        'series': {
            'stickyTracking': False
        }
    },
    'series': [{
        'name': 'Nợ nhóm 2',
        'data': df_chart_1[748].to_list(),
        'color':'#C6DBD0',
        'visible': False
    }, {
        'name': 'Nợ nhóm 3',
        'data': df_chart_1[749].to_list(),
        'color':'#C6DBD0'
    }, {
        'name': 'Nợ nhóm 4',
        'data': df_chart_1[750].to_list(),
        'color':'#9ECBED'
    }, {
        'name': 'Nợ nhóm 5',
        'data': df_chart_1[751].to_list(),
        'color':'#3C97DA'
    }, {
        'type': 'spline',
        'yAxis': 1,
        'name': 'Tỷ lệ nợ xấu',
        'data': df_chart_1['Tỷ lệ nợ xấu'].to_list(),
    }],
    'lang': {
        'thousandsSep': '.',
        'decimalPoint': ','
    },
}

chart = Chart(options = as_dict)
chart.display()

内容的提问来源于stack exchange，提问作者duy lam