以德国日期格式输入数据并结合 Chart Js

Posted 2023-02-24

【中文标题】以德国日期格式输入数据并结合 Chart Js

【英文标题】：Input data in german data format combined with ChartsJs

【发布时间】：2021-10-25 01:00:45

【问题描述】：

我对 Charts.js 比较陌生，但我需要它来为我的网页创建一些漂亮的图表。在后台我有一个 Django 项目正在运行，它计算出一定数量的数字。由于我已将 Django 中的语言代码设置为“de-at”（要求，因为有一些输入变量需要由奥地利用户填写），所以数字格式如下：“1.000.000,54€”而不是像“1,000,000.54€”这样的美国方式。

如果我现在想将一些数据添加到charts.js 中，它不会读取超过6 位的数据。此外，如果有像 "653.598,36" 这样的数字，它实际上需要两个参数，即 (653,598 ; 36)。

在 python 中格式化数字并没有帮助，因为charts.js 不会为图形使用字符串。在charts.js 选项中使用设置“locale = 'de-DE'”仅有助于标记属性，而不是数据本身。

如果我将 Django 设置改回“en-us”，charts.js 会使用这些数字，但网页上的数字对于最终用户来说格式不正确。

有人遇到过这个问题并有解决办法吗？

谢谢你和最好的问候！

这里是带有示例值的charts.js 代码。我直接在 html 文件中使用了 chart.js。

注意：数据部分中的数字只是示例。通常，其中有一个变量，它具有值。

<canvas id="testChart"  ></canvas>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
                <script>
                var ctx = document.getElementById('testChart').getContext('2d');
                var testChart = new Chart(ctx, 
                    type: 'bar',
                    data: 
                        labels: ['+', '-'],
                        datasets: [
                            label: 'Years 1 - 20',
                            data:  [ 568.987,68, 0],
                            backgroundColor: [
                            'rgba(54, 162, 235, 0.2)'
                            ],
                            borderColor: [
                            'rgba(54, 162, 235, 0.2)'
                            ],
                            borderWidth: 1
                        , 
                            label: 'Einnahmen nach 20',
                            data:  [ 1.265.986,32 , 0],
                            backgroundColor: [
                            'rgba(255, 99, 132, 0.2)'
                            ],
                            borderColor: [
                            'rgba(255, 99, 132, 0.2)'
                            ],
                            borderWidth: 1
                        ,
                            label: 'EK',
                            data:  [0, 120.000,00],
                            backgroundColor: [
                            'rgba(200, 50, 132, 0.2)'
                            ],
                            borderColor: [
                            'rgba(200, 50, 132, 0.2)'
                            ],
                            borderWidth: 1
                        , 
                            label: 'FK',
                            data:  [0, 480.000,00],
                            backgroundColor: [
                            'rgba(150, 20, 132, 0.2)'
                            ],
                            borderColor: [
                            'rgba(150, 20, 132, 0.2)'
                            ],
                            borderWidth: 1
                        
                        ]
                    ,
                    options: 
                        plugins: 
                            title: 
                                display: true,
                                text: 'Testgrafik'
                            ,
                        ,
                        locale: 'de-DE',
                        responsive: true,
                        scales: 
                            x: 
                                stacked: true,
                            ,
                            y: 
                                stacked: true
                            
                        
                    
                );
                </script>

【参考方案1】：

在该库中插入数字之前，请执行以下操作： EDIT2：我误读了您的问题，我以为您在问如何更改浮点整数格式。

let n = "653.598,36";
let result = "";
let decimalPart = n.split(",")[1];
let decimalPartLen = decimalPart.length;
n = n.replace(".",""); //parseFloat doesn't like commas
let commaIndex = n.length - decimalPartLen;
result = parseFloat(n.substr(0,commaIndex - 1)+"."+n.substr(commaIndex, n.length));
console.log(result);

编辑：这是客户端 js，但您可以在 python 中执行此操作，只需进行最少的更改 这是在python中：

n = "653.598,36"
result = ""
decimalPart = n.split(",")[1]
decimalPartLen = len(decimalPart)
n = n.replace(".","")
commaIndex = len(n) - decimalPartLen
result = float(n[:commaIndex-1]+"."+n[commaIndex:])
print(result)