谷歌图表：柱标签精确值不近似

我有两个图表： 1）google.charts.Bar 2）google.visualization.PieChart谷歌图表：柱标签精确值不近似

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

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

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

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

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

 

 
\t } 
 
\t 
 

 

 
\t 
 
\t 
 
\t

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

两者都加载，但google.charts。 Bar显示第一列标签/工具提示的近似值;例如：“Vendedor 3”（Saller 3）的值应该是76171.08，但会显示76 Mil（我使用的语言是'pt_BR'），但不显示确切的值（条形图显示工具提示当用户悬停在列上时））。

google.charts.load（ '当前'，{ '包'：[ '酒吧'， 'corechart']， 语言： 'pt_BR表示'}）;

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

有些奇怪。我试图创建第三个图形google.visualization。 ColumnChart在同一页面上，图形1出现时带有精确值的标签（不是近似值）。如果删除图3，则数值将返回到显示的近似值。

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

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

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

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

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

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

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

 
\t } 
 
\t

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

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

你能帮助我吗？

来源

2016-09-17 Mirovisky

看ColumnChart中的'format'选项 - 在中使用BarChart - '格式：'decimal'' – WhiteHat

我试过但没有工作 https://jsfiddle.net/almiroleal/5w3n1cku/2/ – Mirovisky

使用NumberFormat类绘制图表前向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>

来源

2016-09-17 20:34:28 WhiteHat

使用'NumberFormat'，见上面的答案... – WhiteHat

这个问题的任何运气？ – WhiteHat

谷歌图表：柱标签精确值不近似

回答

相关问题