Google Visualization CategoryFilter для типа даты - PullRequest
Новая
       4

Google Visualization CategoryFilter для типа даты

1 голос
/ 02 марта 2020

У меня есть таблица, которая содержит фильтр для myDate и partCategory. Мой пример данных содержит одну дату 1 января 2020 года. CategoryFilter отображает 1 января 2020 года несколько раз. Другое 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 />

1 Ответ

0 голосов
/ 02 марта 2020

в фильтре категорий 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 />
...