1

我有两个图表：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。栏显示第一列的标签/工具提示的近似值；不显示确切值（当用户将鼠标悬停在列上时，条形图显示工具提示）示例：“供应商 3”（Saller 3）的值应为 76171.08，但显示为 76 Mil（我使用语言：'pt_BR' ）。

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

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

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

带有 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>

你能帮助我吗？

4

1 回答 1

0

use the NumberFormat class to format the data,
before drawing the chart... 

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

see following working snippet...

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-17T20:34:28.550 回答