Google Charts：如何在可视化中替换数据表元素，而不是在原始表中替换数据表元素（DataView方法不起作用）？

Question

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

我试图在下面修改的Google Playground示例中复制这个问题（以及我试图修复它的失败尝试）。在本例中，我将初始数据集更改为在Gender列中有“m”和“f”，我仍然希望可视化在下拉列表和显示的表中显示“male”和“fomen”，就像它在原始可视化中所做的那样。

我的修正尝试被标记为修正性别的尝试；基本上，我试图创建原始表的DataView，并用一个计算列替换Gender列，将'm和'f转换为'male's和'fale's...但我不确定这是否是一个明智的方法，即使我能使它工作（但我做不到）。这样做的目的是避免用一个长值替换原始表中的每一个短值；我只想替换在可视化中显示的表值。但我在这里或其他地方都找不到其他的方法，而且我对这个东西有点陌生，所以我不认为我能在没有一些指导的情况下想出一个方法。至少，如果过去几个小时的故障是任何迹象的话。

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

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下，包含一个标签名称作为选项（例如：“标签:'gender'”）以便控件和图表可以按标签引用计算的列；

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

3）将我的sexfix代码中的变量重命名从常规格式“var='x'”更改为“return：{v:'x'f:'xxxxx'}”；以及

4）添加“AddFormattedValue：true”行，或者使用ControlWrappers和ChartWrappers中的“View：”选项来显示格式化值。

Answer 1

我怀疑您的代码有两个问题。第一种情况是，在将“gender”列添加到DataView时，没有使用列标签，这是必要的，因为性别筛选器设置了FilterColumnLabel选项，而不是FilterColumnIndex。添加要修复得标签：

{calc: sexfix, type:'string', label: 'Gender'}

第二个问题是使用DataTable而不是DataView绘制仪表板：

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(dview);