javascript - examples - google charts legend

Cómo escribir un formateador personalizado para Google DataTables(para uso en la API de visualización)

Question

Estoy buscando dar formato a mis datos en los que reemplazo números con íconos.

Hasta donde puedo decir, Google no tiene actualmente un formateador para hacerlo:

http://code.google.com/apis/chart/interactive/docs/reference.html#formatters

Hay una breve mención en los documentos sobre los formateadores personalizados, pero parece que no puedo encontrar ningún documento sobre cómo comenzar a escribir un formateadores personalizados.

¿Alguien puede señalarme en la dirección correcta?

Hay una pregunta similar en StackOverflow: escriba un formateador personalizado para Google Charts Api . Sin embargo, la pregunta se resolvió simplemente utilizando los formateadores integrados (que no creo que pueda usar).

Answer 1

A diferencia de una tabla de datos, una vista de datos permite definir columnas calculadas a través de SetColumns

google.charts.load(''current'', {''packages'':[''table'']});

google.charts.setOnLoadCallback(function() {
  // Create and populate the data table.
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn(''string'', ''Name'');
  dataTable.addColumn(''number'', ''Icon Nr'');
  dataTable.addRow([''Tong Ning mu'', 174]);
  dataTable.addRow([''Huang Ang fa'', 523]);
  dataTable.addRow([''Teng nu'', 86]);

  // Create and define the data view with custom formatter in the calc property
  var dataView = new google.visualization.DataView(dataTable);
  dataView.setColumns([0, {
    type: ''string'',
    label: ''Icon'',
    calc: function(dataTable, rowNr) {
      var iconMap = {
        174: "http://farm1.static.flickr.com/76/buddyicons/[email protected]?1149480603",
        523: "http://farm1.static.flickr.com/28/buddyicons/[email protected]?1129271399",
        86: "http://farm3.static.flickr.com/2698/buddyicons/[email protected]?1303489082"
      }
      var value = dataTable.getValue(rowNr, 1); // 1 is the column
      var formattedValue = iconMap[value]; // convert
      var htmlString = "<img src=" + formattedValue + " />"; // wrap
      // console.log(rowNr, value, formattedValue); // debug
      return htmlString;
    }
  }]);

  // Create and draw the visualization.
  visualization = new google.visualization.Table(document.getElementById(''table''));
  visualization.draw(dataView, {
    allowHtml: true // allow html, just like any html formatter will require
  });
});

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

Answer 2

Los formateadores de DataTable incorporados actualmente solo permiten la personalización con cadenas de formato (patrones). La personalización con una función de devolución de llamada no es compatible. Aquí hay una clase de formateador que soporta una función de devolución de llamada.

/**
 * Custom formatter class for Google Visualization DataTable
 * Can be used like a built-in formatters when they are not enough. 
 * https://developers.google.com/chart/interactive/docs/reference#formatters
 * Changes the displayed/formatted value. The value itself remains unchanged.
 *
 * @param function() custom value conversion function
 *  this function 
 *  - takes one value as input (the original value) and 
 *  - returns the formatted value
 */
var CustomFormatter = function(formatValue) {
  this.formatValue = formatValue;
}

/**
 * Formats a Google DataTable column
 * @param {Object} dt DataTable to format
 * @param {Number} column index number
 */
CustomFormatter.prototype.format = function(dt, column) {
  for (var i = 0; i < dt.getNumberOfRows(); i++) {
    var value = dt.getValue(i, column);
    dt.setFormattedValue(i, column, this.formatValue(value));
  }
}

Esta clase se puede usar como las funciones del formateador incorporado, pero con una función de devolución de llamada en el constructor, como esta que convierte un número a HH: MM: SS

var customFormatter = new CustomFormatter(function(value) {
    var hours = parseInt(value / 3600) % 24;
    var minutes = parseInt(value / 60) % 60;
    var seconds = value % 60;
    return (hours < 10 ? "0" + hours : hours) +
      ":" + (minutes < 10 ? "0" + minutes : minutes) +
      ":" + (seconds < 10 ? "0" + seconds : seconds);
});
customFormatter.format(dataTable, 1);

Aquí está el violín de demostración de trabajo: http://jsfiddle.net/o5tdt2r8/10/

Alternativamente, use addColumn en un DataView, como se documenta en otra respuesta.

Gracias a @ oli''s por la respuesta original. Separé la función de formato de devolución de llamada personalizada del formateador genérico.

Answer 3

No creo que puedas hacer que los formateadores actuales hagan lo que quieres, pero deberías poder hacer tu propio formateador fácilmente. A continuación, coloco iconFormatter para una muestra: esto podría ajustarse para hacer lo que realmente necesite.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load(''visualization'', ''1'', {packages: [''table'']});
    </script>
    <script type="text/javascript">
      /**
      * Gviz icon formatter
      * @param {Object<Number, String>} Map of numbers to icon URIs
      */
      var iconFormatter = function(iconMap) {
        this.iconMap = iconMap;
      }
      /**
       * Formats a gviz DataTable column
       * @param {Object} dt DataTable to format
       * @param {Number} column index number
       */
      iconFormatter.prototype.format = function(dt, column) {
        for (var i=0;i<dt.getNumberOfRows();i++) {
          var formattedValue = this.iconMap[dt.getValue(i, column)];
          var htmlString = "<img src="+formattedValue+" />";
          dt.setFormattedValue(i, column, htmlString);
          // underlying value preserved
          console.log(dt.getValue(i, column)); 
        }
      }
    </script>
    <script>
      function drawVisualization() {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn(''string'', ''Name'');
        data.addColumn(''number'', ''Height'');
        data.addRows(3);
        data.setCell(0, 0, ''Tong Ning mu'');
        data.setCell(1, 0, ''Huang Ang fa'');
        data.setCell(2, 0, ''Teng nu'');
        data.setCell(0, 1, 174);
        data.setCell(1, 1, 523);
        data.setCell(2, 1, 86);

        var iconMap = {
          174: "http://farm1.static.flickr.com/76/buddyicons/[email protected]?1149480603",
          523: "http://farm1.static.flickr.com/28/buddyicons/[email protected]?1129271399",
          86: "http://farm3.static.flickr.com/2698/buddyicons/[email protected]?1303489082"
          // other numbers
        }

        // Create and draw the visualization.
        visualization = new google.visualization.Table(document.getElementById(''table''));
        // apply our formatter, just like normal
        var formatter = new iconFormatter(iconMap);
        formatter.format(data, 1);
        // allow html, just like any html formatter will require
        visualization.draw(data, {allowHtml: true});
      }
      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body>
    <div id="table"></div>
  </body>
</html>

Espero que ayude.