Google Chart with extended X Axis

嗨我想在谷歌条形图下面的东西。 Google Chart with extended X Axis

以上只是两个日期两次扩展X轴的示例。我试着动态设置2日期，输出如下图所示。 x-axis missing second row of dates

的代码如下，但我并没有设定以下产品“A”日期取得突破，“B”等来做到这一点有什么建议？我没有使用 hAxis倾斜是：{title：“时间轴”，textPosition：“走出去”，slantedText：真正}我发现了上述问题的好办法，

<!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

多级轴像这样的不受Visualization API支持。您可以使用多个“域”[列角色]（https://developers.google.com/chart/interactive/docs/roles#domainrole）。 – asgallant

，与这个伟大的stackexchange的帮助答案（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

Google Chart with extended X Axis

回答

相关问题