如何在 Google Charts 中指定小数点分隔符？

Posted 2023-03-28

【中文标题】如何在 Google Charts 中指定小数点分隔符？

【英文标题】：How to specify the decimal separator in Google Charts?

【发布时间】：2015-11-15 02:11:55

【问题描述】：

有没有办法在 Google 图表中指定小数点分隔符？

默认情况下，它似乎基于区域设置，但是我需要将小数点分隔符设置为“点”而不是某些区域设置的逗号（我的用户位于逗号作为小数点分隔符的区域设置）是默认值，但被认为是老式/过时的）

这将适用于所有数字，从轴标签到工具提示。其余的语言环境选项将保持不变。

【参考方案1】：

Google Visualization API 提供 formatters，可用于重新格式化可视化中的数据

根据NumberFormat：

描述数字列的格式。格式化选项 包括指定前缀符号（例如美元符号）或 用作千位标记的标点符号。

下面的示例演示了如何将格式化程序应用于Salary 列，以便使用. 符号呈现其值（NumberFormat 对象的decimalSymbol 和groupingSymbol 属性用于此目的）

google.load("visualization", "1",  packages: ["table"] );
google.setOnLoadCallback(drawChart);

function drawChart() 
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time');
    data.addRows(5);
    data.setCell(0, 0, 'John');
    data.setCell(0, 1, 10000);
    data.setCell(0, 2, true);
    data.setCell(1, 0, 'Mary');
    data.setCell(1, 1, 25000);
    data.setCell(1, 2, true);
    data.setCell(2, 0, 'Steve');
    data.setCell(2, 1, 8000);
    data.setCell(2, 2, false);
    data.setCell(3, 0, 'Ellen');
    data.setCell(3, 1, 20000);
    data.setCell(3, 2, true);
    data.setCell(4, 0, 'Mike');
    data.setCell(4, 1, 12000);
    data.setCell(4, 2, false);

    var formatter = new google.visualization.NumberFormat( prefix: '$',decimalSymbol: '.', groupingSymbol: '.' );
    formatter.format(data, 1); // Apply formatter to second column

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1]);

    
    var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(view,  width: '420px', height: '240px' );

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>

更新

根据Customizing Axes，您可以使用hAxis.format和vAxis.format控制标签编号的格式

google.load("visualization", "1",  packages: ["corechart"] );
google.setOnLoadCallback(drawChart);

function drawChart() 
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time');
    data.addRows(5);
    data.setCell(0, 0, 'John');
    data.setCell(0, 1, 0.1000);
    data.setCell(0, 2, true);
    data.setCell(1, 0, 'Mary');
    data.setCell(1, 1, 0.2500);
    data.setCell(1, 2, true);
    data.setCell(2, 0, 'Steve');
    data.setCell(2, 1, 0.800);
    data.setCell(2, 2, false);
    data.setCell(3, 0, 'Ellen');
    data.setCell(3, 1, 0.2000);
    data.setCell(3, 2, true);
    data.setCell(4, 0, 'Mike');
    data.setCell(4, 1, 0.1200);
    data.setCell(4, 2, false);

    var formatter = new google.visualization.NumberFormat( prefix: '$', decimalSymbol: '.', groupingSymbol: '.' );
    formatter.format(data, 1); // Apply formatter to second column

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1]);


    var table = new google.visualization.LineChart(document.getElementById('table_div'));
    table.draw(view,  width: '420px', height: '240px', vAxis:  format:'$#,##0.00'    );

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>

【讨论】：

不适用于轴标签 (jsbin.com/xaxekusilu/1/edit?html,js,output)

您可以使用hAxis.format 控制标签编号的格式，例如：vAxis: format:'$#,##0.00' （有关详细信息，请参阅更新的答案）

是的，已经在使用自定义格式，但这不会影响小数点分隔符，即使使用 '0.0' 格式，它也会显示为 '0,0'

【参考方案2】：

也许，用正确的位置加载库可以帮助一些人（为我工作）：

// Load Google Charts for the Portuguese locale.
google.charts.load('current', 'packages':['corechart'], 'language': 'pt');

更多信息：https://developers.google.com/chart/interactive/docs/basic_load_libs#loadwithlocale

【讨论】：

使用语言可能会给您带来另一个问题 - 例如，包含月份名称的日期也会被翻译成葡萄牙语，因此这个解决方案不是很好。

【参考方案3】：

如果您的数据来自带有模型的控制器，您可以使用 model.data.replace(",",".")。所以谷歌图表可以显示你的浮动数据。