Question

您好我正在谷歌条形图中尝试类似下面的内容。 google chart with extended X axis

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

代码如下，但我没有在产品'A'，'B'等设置日期中获得突破。有任何建议可以实现吗？我做了倾斜使用 hAxis：{title：“TIME FRAME”，textPosition：“out”，slantedText：true}，

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

Answer 1

我找到了上述问题的调整，借助这个伟大的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

带有扩展X轴的Google图表

1 个答案: