如何为Google DataTables编写自定义格式化程序（用于可视化API） [英] How to write a custom formatter for Google DataTables (for use on visualisation api)
问题描述
我希望格式化我的数据，用图标替换数字。
I'm looking to format my data in which I replace numbers with icons.
据我所知，Google目前没有格式化程序可以这样做：
As far as I can tell Google do not currently have a formatter to do so:
http://code.google.com/apis/chart/interactive/docs/reference.html#formatters
内部有一个简短的提及有关自定义格式化程序的文档，但我似乎无法找到有关如何开始编写自定义格式化程序的任何文档。
There is a brief mention within the documents about custom formatters, but I cannot seem to find any documents on how to begin writting a custom formatters.
有人能指出我正确的方向吗？
Can anyone point me in the right direction?
StackOverflow上有类似的问题：为Google Charts Api编写自定义格式化程序。然而，问题只是使用内置格式化程序解决（我不会认为我可以使用）。
There is a similar question on StackOverflow: Write a custom formatter for Google Charts Api . However the question was resolved simply using the built-in formatters (which I don't think I can use).
推荐答案
我不想你能够让当前的格式化程序做你想做的事情，但你应该能够轻松地制作自己的格式化程序。我把下面的iconFormatter放在一起作为样本 - 这可以调整为你真正需要的任何东西。
I don't think you'll be able to make the current formatters to do what you want, but you should be able to make your own formatter easily enough. I put together iconFormatter below for a sample - this could be adjusted to do whatever you need really.
<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>
希望有所帮助。
这篇关于如何为Google DataTables编写自定义格式化程序（用于可视化API）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
