如何为Google DataTables编写自定义格式化程序(用于可视化API)

Question

如何为Google DataTables编写自定义格式化程序(用于可视化API)

Ale*_*ith 18 javascript google-visualization custom-formatting

我想要格式化我的数据,用图标替换数字.

据我所知,Google目前没有格式化程序来执行此操作:

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

文档中有关于自定义格式化程序的简要提及,但我似乎无法找到有关如何开始编写自定义格式化程序的任何文档.

谁能指出我正确的方向？

StackOverflow上有一个类似的问题:为Google Charts Api编写自定义格式化程序.然而,问题只是使用内置格式化程序解决(我认为我不能使用).

Answer 1

oli*_*oli 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>

Run Code Online (Sandbox Code Playgroud)

希望有所帮助.

归档时间：	14 年，2 月前
查看次数：	6408 次
最近记录：	9 年，5 月前