Google X軸のダブルラベル付き線グラフ

私はGoogleラインチャートで作業していますが、x軸（日付賢明なプロセス）でラベルを2重にしたいので、以下のコードでは日付なしのグラフを描画できます、要求されたレイアウトは、標準の設定オプションを介して利用可能ではないがGoogle X軸のダブルラベル付き線グラフ

<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

出典

2016-12-06 Vinod Vishwakarma

....これを助けてください、
を日付に移入し、あなたならば、達成することが可能です元気だったH手動

チャートの'ready'イベントが発生は、可能性

いくつかの仮定の基に作られている表示する一例であり、作業スニペット、下記参照

カテゴリラベルおよびグループ行を追加するとき、SVGを変更しますチャートのサイズと配置に...

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>

出典

2016-12-06 13:38:45 WhiteHat

おかげさまでありがとうございました私は同じ、おかげで多くを探していました。 –

こんにちは、私はこのコードでブラウザの互換性の問題を抱えています。インターネットエクスプローラで日付を見ることができません。 –

がIEとFF用に更新されました... – WhiteHat

Google X軸のダブルラベル付き線グラフ

答えて

関連する問題