charts - horizontal - haxis google chart
Cómo mostrar valores en la parte superior de las columnas Google Chart API (2)
Para el gráfico de columnas no es posible.
https://groups.google.com/forum/?fromgroups=#!topic/google-visualization-api/2PxrqYv2ZBk
Pero con este gráfico de imagen obsoleto es: https://developers.google.com/chart/image/docs/chart_wizard Puede usar el marcador de forma con el tipo de número, pero está en desuso por lo que no se usa.
Me gustaría mostrar los valores en la parte superior de mi cuadro de columnas al igual que en esta imagen:
Pero quiero mostrarles usando la nueva API Google Chart. Aquí está el sitio y su código fuente .
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn(''string'', ''Month'');
data.addColumn(''number'',''a'');
data.addColumn(''number'',''v'');
data.addColumn(''number'',''c'');
data.addColumn(''number'',''e'');
data.addRows(5);
data.setCell(0, 0, ''dfa'');
data.setCell(1, 0, ''Sdfa'');
data.setCell(2, 0, ''Mdz'');
data.setCell(3, 0, ''sd'');
data.setCell(4, 0, ''Rsdr'');
data.setCell(0, 1, 114);
data.setCell(1, 1, 723);
data.setCell(2, 1, 238);
data.setCell(3, 1, 509);
data.setCell(0, 2, 636);
data.setCell(1, 2, 410);
data.setCell(2, 2, 395);
data.setCell(3, 2, 668);
data.setCell(0, 3, 508);
data.setCell(1, 3, 709);
data.setCell(2, 3, 686);
data.setCell(3, 3, 533);
data.setCell(0, 4, 643);
data.setCell(1, 4, 737);
data.setCell(2, 4, 964);
data.setCell(3, 4, 945);
var chart = new google.visualization.ColumnChart(document.getElementById(''chart_div'')).
draw(data,
{title:"Parc localisé par région et par offre",
width:500, height:300,
series: {0:{color: ''#CF0980'', visibleInLegend: true}, 1:{color: ''#999999'', visibleInLegend: true}, 2:{color: ''#990099'', visibleInLegend: true}, 3:{color: ''#FF99CC'', visibleInLegend: true}},isStacked:"true"});}
</script>
</head>
<body><div id="chart_div"></div>
</body>
</html>
Solo agrega
annotations: {
alwaysOutside: true
}
al objeto config