谷歌图表轴模式/格式添加逗号而不是十进制

时间:2015-09-15 21:18:30

标签: angularjs google-visualization linechart

无论我尝试什么,垂直和水平轴上的网格线标签都显示小数点的逗号。

例如,我的列值为1.1到6.8,网格线标签显示类似于5,28,5,52等的内容。

我尝试过设置Axis.format ='#,###。##'和data.cols [0] .pattern ='#,###。##'。都没有工作。模式错了吗?

顺便说一下,我正在使用angular-google-chart,我仔细检查了这些选项是否正确传递给谷歌api,它们是。

我看到有些人谈论格式化程序,但我发现很难相信Google图表的默认设置是添加逗号。

另外,我在Google thoroghly上阅读了线图和轴文档。

请帮忙!

1 个答案:

答案 0 :(得分:2)

格式模式没有定义哪些字符将用作decimalSymbol和groupingSymbol。格式化的值取决于浏览器的语言设置(Accept-Language)

要强制使用特定格式,您必须使用所需格式加载API(例如'en')

一些例子:

  

德国

(decimalSymbol:逗号,groupingSymbol:dot)

    google.load('visualization', '1.1', {packages: ['corechart'],language:'de'});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Y');
      data.addColumn('number', 'Z');
      

      data.addRows([
        [4000.1,  1001.11, 1002.12],
        [4000.2,  1001.51, 1002.82],
        [4000.3,  1001.31, 1001.12]
      ]);

      var options = {
         vAxis: {
          format: '#,###.##'
        }, 
         hAxis: {
          format: '#,###.##'
        }
             
      };
      
      var chart = new google.visualization.LineChart(document.getElementById('linechart'));

      chart.draw(data, options);
    }
<div id="linechart"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

  

(decimalSymbol:逗号,groupingSymbol:space)

    google.load('visualization', '1.1', {packages: ['corechart'],language:'fr'});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Y');
      data.addColumn('number', 'Z');
      

      data.addRows([
        [4000.1,  1001.11, 1002.12],
        [4000.2,  1001.51, 1002.82],
        [4000.3,  1001.31, 1001.12]
      ]);

      var options = {
         vAxis: {
          format: '#,###.##'
        }, 
         hAxis: {
          format: '#,###.##'
        }
             
      };
      
      var chart = new google.visualization.LineChart(document.getElementById('linechart'));

      chart.draw(data, options);
    }
<div id="linechart"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

  

英语

(decimalSymbol:dot,groupingSymbol:逗号)

    google.load('visualization', '1.1', {packages: ['corechart'],language:'en'});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Y');
      data.addColumn('number', 'Z');
      

      data.addRows([
        [4000.1,  1001.11, 1002.12],
        [4000.2,  1001.51, 1002.82],
        [4000.3,  1001.31, 1001.12]
      ]);

      var options = {
         vAxis: {
          format: '#,###.##'
        }, 
         hAxis: {
          format: '#,###.##'
        }
             
      };
      
      var chart = new google.visualization.LineChart(document.getElementById('linechart'));

      chart.draw(data, options);
    }
<div id="linechart"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

相关问题