javascript - Google Visualization CategoryFilter 用于日期类型

Question

我有一个表，其中包含 myDate 和 partCategory 的过滤器。我的示例数据集包含一个日期 2020 年 1 月 1 日。CategoryFilter 多次显示 2020 年 1 月 1 日。零件类别的另一个 CategoryFilter 正确显示，并具有与数据表匹配的单个值。

如何修改 myDate 使其像 partCategory 一样工作？

一如既往地感谢!

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  'packages': ['corechart', 'table', 'gauge', 'controls']
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(gChart0);

function gChart0() {
  drawChart();
}

function drawChart() {

  var result = [{
    "myDate": new Date(2020, 0, 1),
    "partId": '1234567890xxx',
    "partCategory": 'ABC',
    "someNumber": 0
  }, {
    "myDate": new Date(2020, 0, 1),
    "partId": '1234567890yyy',
    "partCategory": 'ABC',
    "someNumber": 0
  }, {
    "myDate":new Date(2020, 0, 1),
    "partId": '1234567890111',
    "partCategory": 'ABC',
    "someNumber": 0
  }];

  //Create DataTable
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Calendar Date');
  data.addColumn('string', 'Part Id');
  data.addColumn('string', 'Part Category');
  data.addColumn('number', 'Some Number');

  var dataArray = [];
  $.each(result, function(i, obj) {
    dataArray.push([
      obj.myDate,
      obj.partId,
      obj.partCategory,
      obj.someNumber
    ]);
  });
  data.addRows(dataArray);

  //Options

  var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard'));

  var categoryPicker1 = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'div_categoryPicker1',
    options: {
      filterColumnIndex: 0,
      matchType: 'any',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false,
        allowNone: true
      }
    }
  });

  var categoryPicker2 = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'div_categoryPicker2',
    options: {
      filterColumnIndex: 2,
      matchType: 'any',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false,
        allowNone: true
      }
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table',
    options: {
      width: '100%',
      height: 'auto',
      page: 'enable',
      pageSize: '15',
      sort: 'enable',
      allowHtml: true
    }
  });

  dashboard.bind([categoryPicker1, categoryPicker2], [table]);
  dashboard.draw(data);

} //END  function drawChart()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<div id="div_dashboard"></div><br />
<div id="div_categoryPicker1"></div><br />
<div id="div_categoryPicker2"></div><br />
<div id="div_table"></div><br />

Answer 1

在 myDate 类别过滤器上，
您可以使用values选项。
这将覆盖数据表中的可用值。

要提供值，可以使用数据表方法 --> getDistinctValues(columnIndex)

在这里，我们将可用值设置为数据表列中不同的日期列表。

var categoryPicker1 = new google.visualization.ControlWrapper({
  controlType: 'CategoryFilter',
  containerId: 'div_categoryPicker1',
  options: {
    filterColumnIndex: 0,
    matchType: 'any',
    ui: {
      labelStacking: 'vertical',
      allowTyping: false,
      allowMultiple: false,
      allowNone: true
    },
    values: data.getDistinctValues(0)  // <-- set values
  }
});

请参阅以下工作片段...

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  'packages': ['corechart', 'table', 'gauge', 'controls']
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(gChart0);

function gChart0() {
  drawChart();
}

function drawChart() {

  var result = [{
    "myDate": new Date(2020, 0, 1),
    "partId": '1234567890xxx',
    "partCategory": 'ABC',
    "someNumber": 0
  }, {
    "myDate": new Date(2020, 0, 1),
    "partId": '1234567890yyy',
    "partCategory": 'ABC',
    "someNumber": 0
  }, {
    "myDate":new Date(2020, 0, 1),
    "partId": '1234567890111',
    "partCategory": 'ABC',
    "someNumber": 0
  }];

  //Create DataTable
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Calendar Date');
  data.addColumn('string', 'Part Id');
  data.addColumn('string', 'Part Category');
  data.addColumn('number', 'Some Number');

  var dataArray = [];
  $.each(result, function(i, obj) {
    dataArray.push([
      obj.myDate,
      obj.partId,
      obj.partCategory,
      obj.someNumber
    ]);
  });
  data.addRows(dataArray);

  //Options

  var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard'));

  var categoryPicker1 = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'div_categoryPicker1',
    options: {
      filterColumnIndex: 0,
      matchType: 'any',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false,
        allowNone: true
      },
      values: data.getDistinctValues(0)
    }
  });

  var categoryPicker2 = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'div_categoryPicker2',
    options: {
      filterColumnIndex: 2,
      matchType: 'any',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false,
        allowNone: true
      }
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table',
    options: {
      width: '100%',
      height: 'auto',
      page: 'enable',
      pageSize: '15',
      sort: 'enable',
      allowHtml: true
    }
  });

  dashboard.bind([categoryPicker1, categoryPicker2], [table]);
  dashboard.draw(data);

} //END  function drawChart()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<div id="div_dashboard"></div><br />
<div id="div_categoryPicker1"></div><br />
<div id="div_categoryPicker2"></div><br />
<div id="div_table"></div><br />