谷歌图表:如何在可视化中替换数据表元素，但不在原始表中(DataView方法不起作用）

我正在尝试执行一个相当基本的过程。我有一个很长的数据表，单元格大小很大，可以与谷歌可视化一起使用。在创建页面之前，我想用代码和缩写替换大单元格，以减少文件大小和加载时间。我能应付。然而，当一个单元格或列的值/名称/标签出现在可视化本身中时，我希望看到该值的长格式版本（例如，原始数据集中的"Male"->谷歌可视化数据表中的"M"->类别过滤器下拉列表、工具提示等中的"Male"），这出乎意料地出现了问题。

我试图在下面修改后的谷歌游乐场示例中复制这个问题（以及我修复它的失败尝试）。在这个例子中，我已经将初始数据集更改为在"性别"列中有"M"answers"F"，并且我仍然希望可视化在下拉列表和显示的表中显示"男性"answers"女性"，就像在原始可视化中一样。

我的修复尝试在下面标记为"尝试修复性别"；基本上，我试图创建原始表的DataView，并用一个计算列替换Gender列，将"m"answers"F"转换为"Male"answers"Female"。。。但我不确定这是否是一个明智的方法，即使我能让它发挥作用（我做不到）。这个runaround的目的是避免用长值替换原始表中的每个短值；我只想替换可视化中显示的表值。但我在这里或其他地方找不到其他方法，而且我对这方面有点陌生，所以我认为如果没有一些指导，我无法想出一个方法。至少，如果过去几个小时的故障有任何迹象的话，那就不是了。

如有任何意见或建议，我们将不胜感激。原始代码示例在这里。

function drawVisualization() {
  // Prepare the data
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('string', 'Gender');
  data.addColumn('number', 'Age');
  data.addColumn('number', 'Donuts Eaten');
  data.addRows([
    ['Michael' , 'M', 12, 5],
    ['Elisa', 'F', 20, 7],
    ['Robert', 'M', 7, 3],
    ['John', 'M', 54, 2],
     ['Jessica', 'F', 22, 6],
     ['Aaron', 'M', 3, 1],
     ['Margareth', 'F', 42, 8],
     ['Miranda', 'F', 33, 6]
  ]);
  *******//ATTEMPT TO FIX GENDER
  /*var sexfix = function (data, row) {
      var val = data.getValue(row, 1);
      switch (val) {
        case 'M':
          val = 'Male';
          break;
        case 'F':
          val = 'Female';
          break;
        default:
          alert('error');
          return 'Error!';
            }
      }
  var dview = new google.visualization.DataView(data);
  dview.setColumns([0,{calc: sexfix, type:'string'}, 2, 3]);
  ********/
  // Define a slider control for the Age column.
  var slider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'control1',
    'options': {
      'filterColumnLabel': 'Age',
    'ui': {'labelStacking': 'vertical'}
    }
  });
  // Define a category picker control for the Gender column
  var categoryPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'control2',
    'options': {
      'filterColumnLabel': 'Gender',
      'ui': {
      'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false
      }
    }
  });
  // Define a Pie chart
  var pie = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart1',
    'options': {
      'width': 300,
      'height': 300,
      'legend': 'none',
      'title': 'Donuts eaten per person',
      'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
      'pieSliceText': 'label'
    },
    // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
    // from the 'data' DataTable.
    'view': {'columns': [0, 3]}
  });
  // Define a table
  var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'chart2',
    'options': {
      'width': '300px'
    }
  });
  // Create a dashboard
  new google.visualization.Dashboard(document.getElementById('dashboard')).
      // Establish bindings, declaring the both the slider and the category
      // picker will drive both charts.
      bind([slider, categoryPicker], [pie, table]).
      // Draw the entire dashboard.
      draw(data);
}
​

编辑：下面的解决方案。总结：

1） 在dview.setColumns下，包括一个标签名称作为选项（例如，"label:'Gender'"），以便控件和图表可以逐个标签引用计算的列；

2） 绘制视图，而不是表格（最后一行应该是："draw（dview）"）；

3） 将我的sexfix代码中的变量重命名从通用格式"var='X'"更改为"return：｛v:'X'f:'Xxxxxx'｝"；和

4） 在ControlWrappers和ChartWrappers中添加行"addFormattedValue:true"或使用"view:"选项来显示格式化的值。