Google 图表：列标签的精确值不是近似值

Question

我有两个图表： 1) google.charts.Bar 2) google.visualization.PieChart

密码是：https://jsfiddle.net/almiroleal/5w3n1cku/2/

 google.charts.load('current', {'packages':['bar','corechart'], language:'pt_BR'});
 google.charts.setOnLoadCallback(drawChart);
 function drawChart() {
  var data = google.visualization.arrayToDataTable([
   ['Vendedores', 'Valor', 'n de vendas'],
   ['Vendedor 1', 24685.27, 298],
   ['Vendedor 2', 34415.24, 58],
   ['Vendedor 3', 76171.08, 615],
   ['Vendedor 4', 60106,  649],
   ['Vendedor 5', 38779.04, 445]
  ]);

  var bar_options = {
   chart: {
    title: 'Vendas em Valores',
    subtitle: 'por Vendedores'
   },
   series: {
    0: { axis: 'valor'}, // Bind series 0 to an axis named 'valor'.
    1: { axis: 'qtd' } // Bind series 1 to an axis named 'qtd'.
   },
   axes: {
    y: {
     valor: {label: 'total em R$'}, // Left y-axis.
     qtd: {side: 'qtd de vendas', label: 'Qtd de Vendas'}  // Right y-axis.
    },
   }   
  };
 
  
  var chart = new google.charts.Bar(document.getElementById('grafico1'));
  chart.draw(data, bar_options);

  var data2 = google.visualization.arrayToDataTable([
   ['Vendedores', 'Valor'],
   ['Vendedor 1', 24685.27],
   ['Vendedor 2', 34415.24],
   ['Vendedor 3', 76171.08],
   ['Vendedor 4', 60106],
   ['Vendedor 5', 38779.04]
  ]);
  var pie_options = {
   title: 'Percentual de Vendas',
   subtitle: 'por Vendedores',
   is3D: true
  };

  var chart = new google.visualization.PieChart(document.getElementById('grafico2'));
  chart.draw(data2, pie_options );


 }

<script src="https://www.gstatic.com/charts/loader.js"></script>
 <div id="grafico1" style="width: 700px; height: 300px;"></div>
 <div id="grafico2" style="width: 400px; height: 300px;"></div>

都加载了，但是google.charts.Bar显示第一列的label/tooltip的近似值；不显示确切值（当用户将鼠标悬停在列上时条形图显示工具提示）示例："Vendedor 3"（Saller 3）的值应为 76171.08，但显示 76 Mil（我使用的语言：'pt_BR').

google.charts.load('current', {'packages':['bar','corechart'], language:'pt_BR'});

如何在 google.charts.Bar 图表中显示带小数的精确值？

有点奇怪。我试图在同一页面上创建第三个图形 google.visualization.ColumnChart，并且图形 1 出现了带有精确值（不是近似值）的标签。如果删除图 3，则值 return 显示为近似值。

ColumnChart的代码 https://jsfiddle.net/almiroleal/cumtdhnh/1/

 google.charts.load('current', {'packages':['bar','corechart'], language:'pt_BR'});
 google.charts.setOnLoadCallback(drawChart);
 function drawChart() {
  var data = google.visualization.arrayToDataTable([
   ['Vendedores', 'Valor', 'n de vendas'],
   ['Vendedor 1', 24685.27, 298],
   ['Vendedor 2', 34415.24, 58],
   ['Vendedor 3', 76171.08, 615],
   ['Vendedor 4', 60106,  649],
   ['Vendedor 5', 38779.04, 445]
  ]);

  var bar_options = {
   chart: {
    title: 'Vendas em Valores',
    subtitle: 'por Vendedores'
   },
   series: {
    0: { axis: 'valor'}, // Bind series 0 to an axis named 'valor'.
    1: { axis: 'qtd' } // Bind series 1 to an axis named 'qtd'.
   },
   axes: {
    y: {
     valor: {label: 'total em R$'}, // Left y-axis.
     qtd: {side: 'qtd de vendas', label: 'Qtd de Vendas'}  // Right y-axis.
    },
   }   
  };
 
  
  var chart = new google.charts.Bar(document.getElementById('grafico1'));
  chart.draw(data, bar_options);

  var data2 = google.visualization.arrayToDataTable([
   ['Vendedores', 'Valor'],
   ['Vendedor 1', 24685.27],
   ['Vendedor 2', 34415.24],
   ['Vendedor 3', 76171.08],
   ['Vendedor 4', 60106],
   ['Vendedor 5', 38779.04]
  ]);
  var pie_options = {
   title: 'Percentual de Vendas',
   subtitle: 'por Vendedores',
   is3D: true
  };

  var chart = new google.visualization.PieChart(document.getElementById('grafico2'));
  chart.draw(data2, pie_options );

  var col_options = {
   chart: {
    title: 'Vendas em Valores - column chart',
    subtitle: 'por Vendedores'
   },
   series: {
    0: { axis: 'valor'}, // Bind series 0 to an axis named 'valor'.
    1: { axis: 'qtd' } // Bind series 1 to an axis named 'qtd'.
   },
   axes: {
    y: {
     valor: {label: 'total em R$', format: 'decimal'}, // Left y-axis.
     qtd: {side: 'qtd de vendas', label: 'Qtd de Vendas'}  // Right y-axis.
    }
   }   
  };

  
  var chart = new google.visualization.ColumnChart(document.getElementById('grafico3'));
  chart.draw(data, col_options);

 }

<script src="https://www.gstatic.com/charts/loader.js"></script>

 <div id="grafico1" style="width: 700px; height: 300px;"></div>
 <div id="grafico2" style="width: 400px; height: 300px;"></div>
 <div id="grafico3" style="width: 400px; height: 300px;"></div>

你能帮帮我吗？

Answer 1

使用NumberFormatclass格式化data,
在绘制图表之前...

var formatNumer = new google.visualization.NumberFormat({pattern: 'decimal'});
formatNumer.format(data, 1);

请参阅以下工作片段...

google.charts.load('current', {'packages':['bar','corechart'], language:'pt_BR'});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Vendedores',  'Valor',  'n de vendas'],
      ['Vendedor 1',  24685.27, 298],
      ['Vendedor 2',  34415.24, 58],
      ['Vendedor 3',  76171.08, 615],
      ['Vendedor 4',  60106,    649],
      ['Vendedor 5',  38779.04, 445]
    ]);

    var formatNumer = new google.visualization.NumberFormat({pattern: 'decimal'});
    formatNumer.format(data, 1);

    var bar_options = {
      chart: {
        title: 'Vendas em Valores',
        subtitle: 'por Vendedores'
      },
      series: {
        0: { axis: 'valor'}, // Bind series 0 to an axis named 'valor'.
        1: { axis: 'qtd' } // Bind series 1 to an axis named 'qtd'.
      },
      axes: {
        y: {
          valor: {label: 'total em R$', format: 'decimal'}, // Left y-axis.
          qtd: {side: 'qtd de vendas', label: 'Qtd de Vendas'}  // Right y-axis.
        },
      }     
    };
  
    
    var chart = new google.charts.Bar(document.getElementById('grafico1'));
    chart.draw(data, bar_options);

    var data2 = google.visualization.arrayToDataTable([
      ['Vendedores',  'Valor'],
      ['Vendedor 1',  24685.27],
      ['Vendedor 2',  34415.24],
      ['Vendedor 3',  76171.08],
      ['Vendedor 4',  60106],
      ['Vendedor 5',  38779.04]
    ]);
    var pie_options = {
      title: 'Percentual de Vendas',
      subtitle: 'por Vendedores',
      is3D: true
    };

    var chart = new google.visualization.PieChart(document.getElementById('grafico2'));
    chart.draw(data2, pie_options );
  }

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="grafico1" style="width: 700px; height: 300px;"></div>
<div id="grafico2" style="width: 400px; height: 300px;"></div>

Google 图表：列标签的精确值不是近似值

Google chart: Column Label exact value not approximate

charts

google-visualization

bar-chart

multiple-columns

column-chart