haxis - google charts tutorial español

¿Cómo crear un formato de eje de "moneda corta" en Google Charts?

Question

Tengo un Cuadro de columnas con la API de gráficos de Google, y todo es excelente, excepto el eje Y ( vAxis ). El gráfico en sí trata de los valores en dólares, que pueden oscilar entre algunos miles y miles de millones, según la vista de datos. hAxis tiene un hermoso formato ''short'' que permite que la API de Google Chart haga todo el trabajo pesado de abreviar cosas para usted (5,000 a 5K, 60,000,000 a 6M, etc.), pero nos gustaría hAxis un prefijo a los valores con un signo de dólar. . Sé que también hay un formato integrado de ''currency'' y puede proporcionar su propio formato personalizado, pero no puedo encontrar la forma de que ninguno de estos se comporte del mismo modo que ''short'' .

...

// set chart options
var options = {
    chartArea: { top: 70, left: 75, width: 675, height: 300 },
    isStacked: true,
    vAxis: { format: ''short'', gridlines: {count: 6}, textStyle: {fontSize: 12} },
    hAxis: { textStyle: {fontSize: 12} },
    legend: { position: ''top'', maxLines: 3 }
};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart($(''colchart''));
chart.draw(data, options);
...

Esto parece el tipo de cosa que debería ser muy, muy común y probablemente ya está incorporada en la biblioteca. Espero estar perdiéndolo. ¿Hay alguna manera de hacerlo sin rodar una solución personalizada a mano?

Answer 1

Puede prefijar números en los datos con $ junto con ''short'' .
No se pudo encontrar una forma de formatear el eje con las opciones estándar, pero como mencionó, puede hacer su propio uso del evento ''ready'' .

Adaptado de un ejemplo anterior ...

google.charts.load(''44'', {
  callback: drawChart,
  packages: [''line'', ''corechart'']
});

function drawChart() {
  // adapted from previous example
  var data1 = google.visualization.arrayToDataTable(
    [[''id'', ''C1''],[1,0.244543243223],[2,0.343454312334],[3,0.6543223411],[4,0.34231342342314],[5,0.454343343223],[6,0.5434221],[7,0.54324324314],[8,0.45324517],[9,0.543222321],[10,0.54325445519]]
  );
  var data2 = google.visualization.arrayToDataTable(
    [[''id'', ''C2''],[1,0.43654362],[2,0.46547543],[3,0.65475431],[4,0.65765454434],[5,0.6765443],[6,0.4654436],[7,0.3534657],[8,0.524343434],[9,0.453455532],[10,0.54354354358]]
  );
  var data3 = google.visualization.arrayToDataTable(
    [[''id'', ''C3''],[1,0.5345524],[2,0.6543453432],[3,0.53453465645614],[4,0.63245524],[5,0.543543536533], [6,0.53454355334],[7,0.242354531],[8,0.3424543523],[9,0.5436536544],[10,0.5425345332]]
  );
  for (var i = 0; i < data1.getNumberOfRows(); i++) {
    data1.setValue(i, 1, data1.getValue(i, 1) * 1000000);
  }
  for (var i = 0; i < data2.getNumberOfRows(); i++) {
    data2.setValue(i, 1, data2.getValue(i, 1) * 1000000);
  }
  for (var i = 0; i < data3.getNumberOfRows(); i++) {
    data3.setValue(i, 1, data3.getValue(i, 1) * 1000000);
  }

  var chartDiv = document.getElementById(''chart'');

  // format numbers in second column to 5 decimals
  var formatter = new google.visualization.NumberFormat({
    prefix: ''$'',
    pattern: ''short''
  });
  formatter.format(data1, 1);
  formatter.format(data2, 1);
  formatter.format(data3, 1);

  var options1 = {
    chartArea: { top: 70, left: 75, width: 675, height: 300 },
    height: 400,
    isStacked: true,
    vAxis: { format: ''short'', gridlines: {count: 6}, textStyle: {fontSize: 12} },
    hAxis: { textStyle: {fontSize: 12} },
    legend: { position: ''top'', maxLines: 3 }
  };

  var joinedData = google.visualization.data.join(data1, data2, ''full'', [[0, 0]], [1], [1]);
  var joinedData2 = google.visualization.data.join(joinedData, data3, ''full'', [[0, 0]], [1,2], [1]);
  var chart1 = new google.visualization.ColumnChart(chartDiv);

  // use the ''ready'' event to modify the chart once it has been drawn
  google.visualization.events.addListener(chart1, ''ready'', function () {
    var axisLabels = chartDiv.getElementsByTagName(''text'');
    for (var i = 0; i < axisLabels.length; i++) {
      if (axisLabels[i].getAttribute(''text-anchor'') === ''end'') {
        axisLabels[i].innerHTML = ''$'' + axisLabels[i].innerHTML;
      }
    }
  });

  chart1.draw(joinedData2, options1);
}

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