google Line chart with double label on X axis

2019-01-27 00:13发布

站内文章 / 后端开发
52 0 0

问题:

I'm working on google line chart and I want to double label on x axis(date wise processes ), I'm able to draw chart without dates with below code but not able to populate dates, 

<html>
<head>
<title>Google Charts Tutorial</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
     google.charts.load('current', {packages: ['corechart']});  
   </script>
</head>
<body>
    <div id="container"
        style="width: 1610px; height: 400px; margin-left:-120px;"></div>

    <script language="JavaScript">
\
function drawChart() {
   // Define the chart to be drawn.
   var data = new google.visualization.DataTable();
   data.addColumn('string', '');
   data.addColumn('number', 'Suceess');
   data.addColumn('number', 'Error');
   data.addColumn('number', 'Warning');


    data.addRows([
     ['RE-LINK|',  266, 2136, 472],
        ['UPDATE-IB',  0, 1722, 2728],
        ['UPDATE-SA',  0, 43580, 87713],  
        ['CREATE-IB/SA', 0, 18920, 103690],
         ['TERMINATE-IB',  0, 2, 0],
          ['TERMINATE-COVERAGE',  3682, 5917, 0],
           ['ADD-COVERAGE AND CHANGE-SITE',  1101, 2433, 7887],
           ['day1--CREATE-IB',  36647,  0,1064]

    ]);
     data.addRows([
    ['RE-LINK',  11649, 221,    1127],
        ['UPDATE-IB',  0,   4844,   79886],
        ['UPDATE-SA',  0, 2961, 7377],  
        ['CREATE-IB/SA', 0, 3993,   13268],
         ['TERMINATE-IB',  4105, 0, 0],
          ['TERMINATE-COVERAGE',  1844, 10834, 0],
           ['day2--ADD-COVERAGE AND CHANGE-SITE',  218, 717,    10498]

    ]);
     data.addRows([
    ['RE-LINK',  3484,  3,  28],
        ['UPDATE-IB',  0, 139207,   238037],
        ['UPDATE-SA',  0, 3, 3],  
        ['CREATE-IB/SA', 0, 4598,   12680],
          ['TERMINATE-COVERAGE',  480,  1210,   90],
           ['day3--ADD-COVERAGE AND CHANGE-SITE',  1,   72, 2372]
    ]);
   data.addRows([



            ['RE-LINK',  7142,  465,    1427],
        ['UPDATE-IB',  0, 105719,   216275],
        ['UPDATE-SA',  0, 14761,    31698],  
        ['CREATE-IB/SA', 0, 5071,   14184],
         ['TERMINATE-IB',  18, 10, 0],
          ['TERMINATE-COVERAGE',  5265, 1280,   98],
           ['day4--ADD-COVERAGE AND CHANGE-SITE',  1173,    12474,  15545]
   ]);

   // Set chart options
   var options = {'title' : 'Applications status biz process wise(4 Days)',


      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
      },
      vAxis: {
         title: '',
         textStyle: {
            color: '#1a237e',
            fontSize: 12,
            bold: true
         },
         titleTextStyle: {
            color: '#1a237e',
            fontSize: 12,
            bold: true
         }
      }, 
      'width':1600,
      'height':400,   
      colors: ['#00ff00', '#ff0000','#ffe102'],
       legend: { position: 'top' },

   };

   // Instantiate and draw the chart.
   var chart = new google.visualization.LineChart(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>

I want to draw this chart

please help on this....

回答1:

although the requested layout is not available via standard configuration options,
it is possible to achieve, if you're ok with modifying the svg manually

when the chart's 'ready' event fires, add the category labels and group lines

see following working snippet, which is just an example to show the possibility

several assumptions are made based on the size and placement of the chart... 

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>



标签： google-visualization
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~