Google visualization 扩展X轴的谷歌图表_Google Visualization

Google visualization 扩展X轴的谷歌图表

google-visualization

Google visualization 扩展X轴的谷歌图表,google-visualization,Google Visualization,嗨，我正在谷歌条形图中尝试下面这样的东西。以上只是将X轴延长两次（两个日期）的示例。我尝试了动态设置，比如说2个日期，结果如下所示。代码如下，但我在产品“A”、“B”等下面设置日期时没有取得突破性进展。有什么建议可以做到这一点吗？我用了一把枪哈克斯：{title:“时间范围”，textPosition:“out”，slidedtext:true} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:

嗨，我正在谷歌条形图中尝试下面这样的东西。

以上只是将X轴延长两次（两个日期）的示例。我尝试了动态设置，比如说2个日期，结果如下所示。

代码如下，但我在产品“A”、“B”等下面设置日期时没有取得突破性进展。有什么建议可以做到这一点吗？我用了一把枪哈克斯：{title:“时间范围”，textPosition:“out”，slidedtext: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>


谷歌可视化API示例
load（'visualization'，'1'，{packages:['corechart']}）；
函数drawVisualization（）{
//一些原始数据（不一定准确）
var data=google.visualization.arrayToDataTable([
[“产品”、“玻利维亚”、“厄瓜多尔”、“马达加斯加”、“巴布亚新几内亚”、“卢旺达”、“平均值”]，
[A'，165938522998450614.6]，
[B'，13511205991268288682]，
[C'，1571167587807097623]，
[D'，1391110615668215609.4]，
[E'，1366916291026366569.6]，
[“产品”、“玻利维亚”、“厄瓜多尔”、“马达加斯加”、“巴布亚新几内亚”、“卢旺达”、“平均值”]，
[A'，165938522998450614.6]，
[B'，13511205991268288682]，
[C'，1571167587807097623]，
[D'，1391110615668215609.4]，
[E'，1366916291026366569.6]
]);
变量选项={
标题：“各国每月咖啡产量”，
vAxis:{title:“Cups”}，
哈克斯：{标题：“时间框架”}，
序列类型：“条”，
};
var chart=new google.visualization.ComboChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}
setOnLoadCallback（drawVisualization）；

我找到了解决上述问题的方法，借助于这个很棒的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>
  <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>


谷歌可视化API示例
load（'visualization'，'1'，{packages:['corechart']}）；
函数drawVisualization（）{
//一些原始数据（不一定准确）
var data=google.visualization.arrayToDataTable([
[‘积’、‘约1’、‘二和’、‘三和’]，
//[角色：域，数据，数据，数据，域，数据，数据]，--COL提示
[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]
]);
变量选项={
标题：“产品状态”，
是的，
vAxis:{title:“----产品计数------>”，titleTextStyle:{fontName:'Chango'}，
hAxis:{title:------------------------------------------------>”，titleTextStyle:{fontName:'Chango'}，textStyle:{color:'#000'，fontSize:12}，textPosition:'out'，SlidedText:true}，
序列类型：“条”，
};
var chart=new google.visualization.ComboChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
//为轴标签添加虚拟数据
var data2=新的google.visualization.DataTable（）；
data2.addColumn（'string'，'x'）；
data2.addColumn（'number'，'dummy'）；
data2.addRows([
[''，空]，
[''，空]，
['11/07/2013'，空]，
[''，空]，
[''，空]，
[''，空]，
[''，空]，
['11/14/2013'，空]，
[''，空]，
[''，空]
]);
chart2=新的google.visualization.ComboChart（document.getElementById（'chart_base'）；
图表2.绘图（数据2，
{
图表区：{
排名：0，
高度：“0%”
},
分:0,，
最高：0，
哈克斯：{
基线颜色：“#FFFFFF”
},
言辞：{
基线颜色：“#FFFFFF”，
方向：-1，
text位置：“无”，
网格线：{
颜色：“#FFFFFF”
}
}
});
}
setOnLoadCallback（drawVisualization）；

最终输出如下所示：

可视化API不支持这样的多级轴。最接近的方法是使用多个

“域”

。