Question

我正在尝试执行一个相当基本的程序。我有一个冗长的数据表，具有较大的单元格大小，可用于Google Visualization。在创建页面之前，我想用代码和缩写替换大单元格，以保持文件大小和加载时间。我能解决这个问题。但是，当单元格或列值/名称/标签显示在可视化本身中时，我希望看到该值的长格式版本（例如原始数据集中的“男性” - > Google Visualization数据表中的“M” - ＆gt;类别过滤器下拉列表中的“男性”，工具提示等），这出乎意料地存在问题。

我试图在下面修改过的Google Playground示例中复制问题（以及我尝试修复它的失败）。在这个例子中，我已经将初始数据集更改为在“性别”列中包含“M”和“F”，并且我仍然希望可视化在下拉列表中显示“男性”和“女性”以及显示的表格。原始的可视化。

我的修复尝试在下面标记为“试图修复性别”;基本上，我正在尝试创建一个原始表的DataView，并用一个计算列替换Gender列，将'M'和'F'转换为'Male'和'Female'...但我不确定这是否是明智的方法，即使我可以让它工作（我不能）。这种解决方法的重点是避免用长的表替换原始表中的每个短值;我只想替换可视化中显示的表值。但是我在这里或其他地方找不到另一种方法，而且我对这些东西有点新意，所以我认为如果没有一些指导我就不会想出一个。至少，如果过去几个小时的失败都没有任何迹象。

任何建议或建议都会非常感激。原始代码示例为here。

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）添加“addFormattedValue：true”行或使用ControlWrappers和ChartWrappers中的“view：”选项显示格式化值。

Answer 1

我怀疑你的代码中有两个问题。首先，当您将“性别”列添加到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);

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

1 个答案: