在谷歌图表中设置 x 轴范围答案

【问题标题】：set x Axis range in google chart在谷歌图表中设置 x 轴范围
【发布时间】：2016-12-13 01:55:59
【问题描述】：

我尝试使用谷歌图表示例创建条形图

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');

    data.addColumn('number', 'Slices');

    data.addRows([
      ['Mushrooms', 5],
      ['Onions', 4],
      ['Olives', 3]
      ['Zucchini', 2],
      ['Pepperoni', 1]
    ]);

图表已成功创建，但在 X 轴上显示的值介于 0 到 6 之间。当我将所有值都传递为 0 时，它会显示从 -1 到 +1 的 X 轴。

是否可以将 X 轴设置为始终从 0% 到 100%。

【问题讨论】：

标签： google-visualization

【解决方案1】：

您可以通过设置 hAxis.viewWindow.min 和 hAxis.viewWindow.max 选项来强制条形图的 x 轴始终显示特定范围：

hAxis: {
    viewWindow: {
        min: 0,
        max: 100
    },
    ticks: [0, 25, 50, 75, 100] // display labels every 25
}

【讨论】：

我在 chrome 和 firefox 中对其进行了测试，在 max:100 上它显示的范围高达 80，当我将它设置为 max:100.1 时，它显示的范围高达 100。
我假设您指的是轴标签，因为在示例情况下，轴的实际范围应该是 0-100。如果要更改 API 默认选择的标签，可以使用 hAxis.ticks 选项覆盖它们；我会用一个例子来更新答案。
有没有办法用日期范围创建viewWindow？我试过viewWindow: { min: new Date(2016,1,1), max: new Date(2016,1,8) }，但x轴上的结果范围不是一月的1-8 ..它似乎已经关闭了..
哦。我的坏作品应该如此。一月的索引为 0 。所以应该是viewWindow: { min: new Date(2016,0,1), max: new Date(2016,0,8) } 的范围为 1 月 1 日至 1 月 8 日。另外be_sure不要以前导零开始您的月份或日期，例如。 012 因为 JS 会将其解释为八进制常量。

【解决方案2】：

设置tick 值：

vAxis: { 
         ticks: [{v:0, f:'0%'},{v:10, f:'10%'},{v:20, f:'20%'},{v:30, f:'30%'}]
}

【讨论】：

【解决方案3】：

你可以通过修改计数值来设置x轴，就像我们使用DataTable()一样

var databmi = new google.visualization.DataTable();

 data.addColumn('string', 'Country');
      data.addColumn('number', 'GDP');
      data.addRows([
        ['US', 16768100],
        ['China', 9181204],
        ['Japan', 4898532],
        ['Germany', 3730261],
        ['France', 2678455]
      ]);

     var options = {
       title: 'GDP of selected countries, in US $millions',
       width: 500,
       height: 300,
       legend: 'none',
       bar: {groupWidth: '95%'},
       vAxis: { 
             title :'your choice',
             gridlines: { count: 4 } 
              },
        hAxis: {
               title :'your choice',
                gridlines: {count: 4}
              }
     };

【讨论】：