Google图表：特定列的每个记录根据其值的不同颜色

Question

我刚刚在https://carlos-sierra.net/2014/07/28/free-script-to-generate-a-line-chart-on-html/了解了谷歌排行榜。

我有一个问题。 可以说我的数据类型不足。

还张贴下面的照片：

TIME – containing the sample time from ash truncated to MM/DD/YYYY-HH24:MI
W – containing the wait event, if none, then CPU.
SMPL – count of samples for that event in that “TIME” minute


TIME W SMPL
4/13/2017-19:44 CPU 1
4/13/2017-19:46 log file sync 1
4/13/2017-19:46 CPU 1
4/13/2017-19:46 CPU 1
4/13/2017-19:47 db file sequential read 1
4/13/2017-19:47 db file sequential read 1
4/13/2017-19:47 log file sync 1
4/13/2017-19:47 CPU 1
4/13/2017-19:47 CPU 1
4/13/2017-19:48 CPU 1
4/13/2017-19:49 CPU 1
4/13/2017-19:50 db file sequential read 1
4/13/2017-19:50 flashback log file sync 1
4/13/2017-19:50 log file sync 4
4/13/2017-19:50 control file sequential read 1
4/13/2017-19:50 log file parallel write 1
4/13/2017-19:50 flashback log file write 1
4/13/2017-19:51 db file sequential read 1
4/13/2017-19:52 CPU 1
4/13/2017-19:52 null event 1

我想仅使用谷歌图表制作堆积区域图表。

我的要求是： w应该是一个变量，其中事件的值将导致不同的颜色。 我不想分别为每个等待做一个不同的列。 我怎样才能做到这一点？

我正在寻找一种图表（下面给出的照片），如果我在excel中复制上述数据并制作数据透视表，我可以获得：

AXIS(categories)-TIME
LEGEND(series)-W
VALUES-Sum of SMPL

如下面的

我不知道如何使用data.addColumn或google.visualization.arrayToDataTable函数完全编码。我试过但没有运气。

Answer 1

您需要使用DataView将w的值分隔为不同的列 和setColumns() method

然后需要为每个时间戳聚合视图
使用group() method

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart', 'table']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['TIME', 'W', 'SMPL'],
    ['4/13/2017 19:44', 'CPU', 1],
    ['4/13/2017 19:46', 'log file sync', 1],
    ['4/13/2017 19:46', 'CPU', 1],
    ['4/13/2017 19:46', 'CPU', 1],
    ['4/13/2017 19:47', 'db file sequential read', 1],
    ['4/13/2017 19:47', 'db file sequential read', 1],
    ['4/13/2017 19:47', 'log file sync', 1],
    ['4/13/2017 19:47', 'CPU', 1],
    ['4/13/2017 19:47', 'CPU', 1],
    ['4/13/2017 19:48', 'CPU', 1],
    ['4/13/2017 19:49', 'CPU', 1],
    ['4/13/2017 19:50', 'db file sequential read', 1],
    ['4/13/2017 19:50', 'flashback log file sync', 1],
    ['4/13/2017 19:50', 'log file sync', 4],
    ['4/13/2017 19:50', 'control file sequential read', 1],
    ['4/13/2017 19:50', 'log file parallel write', 1],
    ['4/13/2017 19:50', 'flashback log file write', 1],
    ['4/13/2017 19:51', 'db file sequential read', 1],
    ['4/13/2017 19:52', 'CPU', 1],
    ['4/13/2017 19:52', 'null event', 1]
  ]);

  var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21'];
  var wValues = data.getDistinctValues(1);
  var viewColumns = [0];
  var aggColumns = [];
  wValues.forEach(function (w, index) {
    viewColumns.push({
      calc: function (dt, row) {
        var wValue = null;
        if (dt.getValue(row, 1) === w) {
          wValue = dt.getValue(row, 2);
        }
        return wValue;
      },
      label: w,
      type: 'number'
    });

    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: index + 1,
      label: w,
      type: 'number'
    });
  });

  var view = new google.visualization.DataView(data);
  view.setColumns(viewColumns);

  var groupView = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.AreaChart(container);
  chart.draw(groupView, {
    areaOpacity: 1,
    colors: colorPallette,
    isStacked: true
  });
  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(groupView);
}

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