18

数字をアイコンに置き換えるデータのフォーマットを探しています。

私が知る限り、Google には現在そのためのフォーマッターがありません。

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

ドキュメント内にカスタム フォーマッタに関する簡単な説明がありますが、カスタム フォーマッタの作成方法に関するドキュメントが見つからないようです。

誰かが私を正しい方向に向けることができますか?

StackOverflow にも同様の質問があります: Write a custom formatter for Google Charts Api。ただし、組み込みのフォーマッターを使用するだけで問題は解決されました（使用できないと思います）。

4

3 に答える 3

23

現在のフォーマッタでやりたいことを実行できるとは思いませんが、独自のフォーマッタを十分に簡単に作成できるはずです。サンプルとして以下に iconFormatter をまとめました。これは、本当に必要なことを行うために調整できます。

<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/63892905@N00.jpg?1149480603",
          523: "http://farm1.static.flickr.com/28/buddyicons/20741728@N00.jpg?1129271399",
          86: "http://farm3.static.flickr.com/2698/buddyicons/70986564@N00.jpg?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>

それが役立つことを願っています。

于 2011-09-14T13:25:10.607 に答える
4

組み込みの DataTable フォーマッタでは、現在、書式設定文字列 (パターン) によるカスタマイズのみが許可されています。コールバック関数によるカスタマイズはサポートされていません。コールバック関数をサポートするフォーマッタ クラスを次に示します。

/**
 * 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));
  }
}

このクラスは、組み込みのフォーマッタ関数のように使用できますが、数値を 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);

これが実際のデモ フィドルです: http://jsfiddle.net/o5tdt2r8/10/

または、他の回答に記載されているように、DataView で addColumn を使用します。

元の回答をくれた@oli'sに感謝します。カスタム コールバック フォーマット関数を汎用フォーマッタから分離しました。

于 2016-06-06T19:53:47.737 に答える