如何根据事件数自定义google时间线图？

Question

如何根据事件从高到低的计数来自定义google时间表？我必须根据事件的数量自定义时间线图。代码链接

 dataTable.addRows([
            ['President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
            ['President', 'John Adams', new Date(1796, 2, 4), new Date(1802, 2, 4)],
            ['President', 'Thomas Jefferson', new Date(1801, 2, 4), new 

Date(1809, 2, 4)],
            ['Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
            ['Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
            ['Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
            ['Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
            ['Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
            ['Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
            ['Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
            ['Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
            ['Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
            ['Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
            ['Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
            ['Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
          ]);

          chart.draw(dataTable);
        };

Answer 1

可以使用方法查找出现的次数。

var dataGroup = google.visualization.data.group(
  data,  // data table
  [0],   // group by column(s)
  [{     // aggregation columns
    column: 0,
    type: 'number',
    aggregation: google.visualization.data.count
  }]
);

结果是另一个数据表。

然后，可以按count列对数据表进行排序。

dataGroup.sort([{column: 1, desc: true}]);

这会给你每一位总统的数目

看下面的工作片段..。

​

google.charts.load('current', {
  callback: drawChart,
  packages:['timeline']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
    ['President', 'John Adams', new Date(1796, 2, 4), new Date(1802, 2, 4)],
    ['President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)],
    ['Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
    ['Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
    ['Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
    ['Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
    ['Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
    ['Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
    ['Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
    ['Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
    ['Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
    ['Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
    ['Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
    ['Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
  ]);

  var dataGroup = google.visualization.data.group(
    data,
    [0],
    [{
      column: 2,
      type: 'date',
      aggregation: google.visualization.data.min
    }, {
      column: 3,
      type: 'date',
      aggregation: google.visualization.data.max
    }]
  );
  dataGroup.sort([{column: 1}]);

  var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
  chart.draw(dataGroup);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

​