谷歌折线图 X 轴上有双标签

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', '');
  data.addColumn('string', '');
  data.addColumn('number', 'Success');
  data.addColumn('number', 'Error');
  data.addColumn('number', 'Warning');
  data.addRows([
    [new Date('12/01/2016'), 'RE-LINK|',  266, 2136, 472],
    [new Date('12/01/2016'), 'UPDATE-IB',  0, 1722, 2728],
    [new Date('12/01/2016'), 'UPDATE-SA',  0, 43580, 87713],
    [new Date('12/01/2016'), 'CREATE-IB/SA', 0, 18920, 103690],
    [new Date('12/01/2016'), 'TERMINATE-IB',  0, 2, 0],
    [new Date('12/01/2016'), 'TERMINATE-COVERAGE',  3682, 5917, 0],
    [new Date('12/01/2016'), 'ADD-CVG / CHG-SITE',  1101, 2433, 7887],
    [new Date('12/01/2016'), 'day1--CREATE-IB',  36647,  0,1064]
  ]);
   data.addRows([
    [new Date('12/02/2016'), 'RE-LINK',  11649, 221,    1127],
    [new Date('12/02/2016'), 'UPDATE-IB',  0,   4844,   79886],
    [new Date('12/02/2016'), 'UPDATE-SA',  0, 2961, 7377],
    [new Date('12/02/2016'), 'CREATE-IB/SA', 0, 3993,   13268],
    [new Date('12/02/2016'), 'TERMINATE-IB',  4105, 0, 0],
    [new Date('12/02/2016'), 'TERMINATE-COVERAGE',  1844, 10834, 0],
    [new Date('12/02/2016'), 'ADD-CVG / CHG-SITE',  218, 717,    10498]
  ]);
   data.addRows([
    [new Date('12/03/2016'), 'RE-LINK',  3484,  3,  28],
    [new Date('12/03/2016'), 'UPDATE-IB',  0, 139207,   238037],
    [new Date('12/03/2016'), 'UPDATE-SA',  0, 3, 3],
    [new Date('12/03/2016'), 'CREATE-IB/SA', 0, 4598,   12680],
    [new Date('12/03/2016'), 'TERMINATE-COVERAGE',  480,  1210,   90],
    [new Date('12/03/2016'), 'ADD-CVG / CHG-SITE',  1,   72, 2372]
  ]);
  data.addRows([
    [new Date('12/04/2016'), 'RE-LINK',  7142,  465,    1427],
    [new Date('12/04/2016'), 'UPDATE-IB',  0, 105719,   216275],
    [new Date('12/04/2016'), 'UPDATE-SA',  0, 14761,    31698],
    [new Date('12/04/2016'), 'CREATE-IB/SA', 0, 5071,   14184],
    [new Date('12/04/2016'), 'TERMINATE-IB',  18, 10, 0],
    [new Date('12/04/2016'), 'TERMINATE-COVERAGE',  5265, 1280,   98],
    [new Date('12/04/2016'), 'ADD-CVG / CHG-SITE',  1173,    12474,  15545]
  ]);

  var view = new google.visualization.DataView(data);
  view.hideColumns([0]);

  var options = {
    chartArea: {
      height: 300,
      left: 60,
      top: 60
    },
    colors: ['#00ff00', '#ff0000','#ffe102'],
    hAxis: {
      title: '',
      textStyle: {
        color: '#01579b',
        fontSize: 10,
        fontName: 'Arial',
        bold: true,
        italic: true
      },
      titleTextStyle: {
        color: '#01579b',
        fontSize: 12,
        fontName: 'Arial',
        bold: false,
        italic: true
      },
      slantedTextAngle: 90
    },
    height: 600,
    legend: {
      position: 'top'
    },
    title: 'Applications status biz process wise(4 Days)',
    vAxis: {
      title: '',
      textStyle: {
        color: '#1a237e',
        fontSize: 12,
        bold: true
      },
      titleTextStyle: {
        color: '#1a237e',
        fontSize: 12,
        bold: true
      }
    },
    width: 1600
  };

  var formatDate = new google.visualization.DateFormat({
    pattern: 'dd-MMM-yy'
  });

  var container = document.getElementById('container');
  var chart = new google.visualization.LineChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var rowIndex = -1;
    var dateValue = null;
    var svgParent = container.getElementsByTagName('svg')[0];
    var labels = [];
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function(text) {
      var groupLabel;
      // find hAxis labels
      if (text.hasAttribute('transform')) {
        rowIndex++;
        if (dateValue !== formatDate.formatValue(data.getValue(rowIndex, 0))) {
          dateValue = formatDate.formatValue(data.getValue(rowIndex, 0));
          groupLabel = text.cloneNode(true);
          groupLabel.removeAttribute('transform');
          groupLabel.removeAttribute('font-style');
          groupLabel.setAttribute('fill', '#333333');
          groupLabel.setAttribute('y', parseFloat(text.getAttribute('y')) + 132);
          groupLabel.textContent = dateValue;
          text.parentNode.appendChild(groupLabel);
          if (labels.length > 0) {
            setLabelX(labels[labels.length - 1], text, 0);
          }
          labels.push(groupLabel);
          addGroupLine(groupLabel, -24, -144);
        }
        if (rowIndex === (data.getNumberOfRows() - 1)) {
          if (labels.length > 0) {
            setLabelX(labels[labels.length - 1], text, 16);
          }
          addGroupLine(text, 18, -12);
        }
      }
    });

    // center group label
    function setLabelX(prevLabel, curLabel, xOffset) {
      prevLabel.setAttribute('x',
        parseFloat(prevLabel.getAttribute('x')) + xOffset +
        ((parseFloat(curLabel.getAttribute('x')) - parseFloat(prevLabel.getAttribute('x'))) / 2)
      );
    }

    // add group line
    function addGroupLine(text, xOffset, yOffset) {
      var parent = container.getElementsByTagName('g')[0];
      var groupLine = container.getElementsByTagName('rect')[0].cloneNode(true);
      groupLine.setAttribute('x', parseFloat(text.getAttribute('x')) + xOffset);
      groupLine.setAttribute('y', parseFloat(text.getAttribute('y')) + yOffset);
      groupLine.setAttribute('width', '0.8');
      groupLine.setAttribute('height', '188');
      groupLine.setAttribute('stroke', '#333333');
      groupLine.setAttribute('stroke-width', '1');
      groupLine.setAttribute('fill', '#333333');
      groupLine.setAttribute('fill-opacity', '1');
      parent.appendChild(groupLine);
    }
  });

  chart.draw(view, options);
}

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