확장 된 X 축이있는 Google 차트

안녕하세요. Google 막대 차트에서 아래와 같은 것을 시도하고 있습니다. google chart with extended X axis 확장 된 X 축이있는 Google 차트

위의 내용은 X 축을 두 번 연장하기위한 샘플입니다. 동적으로 2 개의 날짜를 설정하고 결과가 아래처럼 표시되도록했습니다. x-axis missing second row of dates

'B'는 이러한 목표를 달성하는 등 어떤 제안 아래의 코드는하지만, 나는 'A'제품 아래에 날짜 설정에 획기적인 을하지 않았다? 이 위대한 stackexchange의 도움으로,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['corechart']}); </script> <script type="text/javascript"> function drawVisualization() { // Some raw data (not necessarily accurate) var data = google.visualization.arrayToDataTable([ ['product', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'], ['A', 165, 938, 522, 998, 450, 614.6], ['B', 135, 1120, 599, 1268, 288, 682], ['C', 157, 1167, 587, 807, 397, 623], ['D', 139, 1110, 615, 968, 215, 609.4], ['E', 136, 691, 629, 1026, 366, 569.6], ['product', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'], ['A', 165, 938, 522, 998, 450, 614.6], ['B', 135, 1120, 599, 1268, 288, 682], ['C', 157, 1167, 587, 807, 397, 623], ['D', 139, 1110, 615, 968, 215, 609.4], ['E', 136, 691, 629, 1026, 366, 569.6] ]); var options = { title : 'Monthly Coffee Production by Country', vAxis: {title: "Cups"}, hAxis: {title: "TIME FRAME"}, seriesType: "bars", }; var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(data, options); } google.setOnLoadCallback(drawVisualization); </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>

출처

2013-12-23 AKS

다단계 축이 시각화 API에서 지원되지 않습니다. 얻을 수있는 가장 가까운 것은 여러 개의 '도메인'[열 역할] (https://developers.google.com/chart/interactive/docs/roles#domainrole)을 사용하는 것입니다. – asgallant

내가 위의 문제에 대한 비틀기를 발견 {사실 제목 : "시간 프레임", textPosition : "밖으로", slantedText} 나는 hAxis를 사용하여 기울기를했다 답변 (Google Chart: How to draw the vertical axis for LineChart?)는 다음과 같이 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title> 
     Google Visualization API Sample 
    </title> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Chango"> 

    <script type="text/javascript"> 
     google.load('visualization', '1', {packages: ['corechart']}); 
    </script> 
    <script type="text/javascript"> 
     function drawVisualization() { 
     // Some raw data (not necessarily accurate) 
     var data = google.visualization.arrayToDataTable([ 
      ['product', 'SOME 1', 'TWO SUM', 'THREE SUM'], 
     //  [role: domain, data,  data,  data, domain, data,  data], -- hint for cols 
      ['A', 6,  3,   2], 
      ['B' ,10,  11,  5], 
      ['C', 12,  11,  0], 
      ['D', 19,  7,  2], 
      ['E', 19,  0,   3], 

      ['A', 10,  3,  2], 
      ['B', 0,  11,  5], 
      ['C', 5,  11,  5], 
      ['D', 10,  11,  2], 
      ['E', 12,  6,   1] 
     ]); 

     var options = { 
      title : 'status of products', 
      interpolateNulls: true, 
      vAxis: {title: " --- Count of Product ----->",titleTextStyle:{ fontName: 'Chango'}}, 
      hAxis: {title: "----------------------TIME FRAME ---------------->",titleTextStyle:{ fontName: 'Chango'},textStyle: {color: '#000', fontSize: 12},textPosition:"out",slantedText:true}, 
      seriesType: "bars", 
     }; 

     var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 


// Add dummy data for the axis labels 
    var data2 = new google.visualization.DataTable(); 
    data2.addColumn('string', 'x'); 
    data2.addColumn('number', 'dummy'); 
    data2.addRows([ 
     [' ', null], 
     [' ', null], 
     ['11/07/2013', null], 
     ['', null], 
     ['', null], 
     ['', null], 
     ['', null], 
     ['11/14/2013', null], 
     ['', null], 
     ['', null] 
    ]); 
    chart2 = new google.visualization.ComboChart(document.getElementById('chart_base')); 
    chart2.draw(data2, 
       { 
        chartArea: { 
        top:0, 
        height:"0%" 
        }, 
        min: 0, 
        max: 0, 
        hAxis: { 
        baselineColor: '#FFFFFF' 
        }, 
        vAxis: { 
        baselineColor: '#FFFFFF', 
        direction: -1, 
        textPosition: 'none', 
        gridlines: { 
         color: '#FFFFFF' 
        } 
        } 
       }); 
     } 
     google.setOnLoadCallback(drawVisualization); 
    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 900px; height: 500px;"></div> 
     <div id="chart_base" style="width: 900px; height: 500px;"></div> 

    </body> 
</html>

최종 출력은 다음과 같다 :이 같은

enter image description here

출처

2013-12-24 02:46:23 AKS

확장 된 X 축이있는 Google 차트

답변

관련 문제