Google Charts：如何设置列最大值并且两者之间没有大的差距。 （列）

Question

当前我正在使用＆＃34; Top-X Chart＆＃34;代码格式。
https://jsfiddle.net/u6fdbd6L/1/

但是我想设置Y轴最高值2000并显示出来，而不是按照我添加的数据。

第二个问题，通过使用这种格式之间存在很大差距，我希望它们并排显示。我该怎么办？ 以下是我的代码：

https://jsfiddle.net/wacy5mvv/
  google.load("visualization", "1.1", {packages:['corechart',"bar"]});
      google.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['date', 'pax'],
          ["12-05-2015", 60],
          ["12-06-2015", 31],
          ['12-06-2017', 3]
        ]);

        var options = {
          title: 'Report Chart',
          width: 900,
          legend: { position: 'none' },
          chart: { subtitle: 'Number Of Pax' },
          axes: {
            x: {
              0: { side: 'bottom', label: 'Date'} // Top x-axis.
            }
          },
          bar: { groupWidth: "10%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };

我知道使用这个谷歌图表对我来说会更有用但是我不太了解代码：android:scaleType

例如
- 无法理解为什么v，min和max得到3个参数
- 当我将格式更改为字符串时遇到了一些问题。 等

google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawBasic);

function drawBasic() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Date');
      data.addColumn('number', 'Motivation Level');

      data.addRows([
        [{v: [8, 0, 0], f: '19-08-2014'}, 1],
        [{v: [9, 0, 0], f: '19-08-2014'}, 2],
        [{v: [10, 0, 0], f:'19-08-2014'}, 3],
        [{v: [11, 0, 0], f: '19-08-2014'}, 4]
      ]);

      var options = {
        title: 'Motivation Level Throughout the Day',
        hAxis: {
          title: 'Time of Day',
          format: 'h:mm a',
          viewWindow: {
            min: [7, 30, 0],
            max: [17, 30, 0]
          }
        },
        vAxis: {
          title: 'Number of Pax'
        }
      };

      var chart = new google.visualization.ColumnChart(
        document.getElementById('chart_div'));

      chart.draw(data, options);
    }

Answer 1

您可以使用bar.groupWidth属性设置一组条形图的宽度，下面的示例演示如何在它们之间不设置空格：

bar: { 
    groupWidth: '100%'
}

vAxis.viewWindowMode属性指定如何缩放垂直轴以在图表区域内呈现值，下面的示例演示了如何将垂直最大值设置为100：

vAxis: {  
    viewWindow: { max: 100 }
}     

完整示例

＆＃13;

＆＃13;

google.load("visualization", "1.1", { packages: ['corechart', "bar"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.arrayToDataTable([
      ['date', 'pax'],
      ["12-05-2015", 60],
      ["12-06-2015", 31],
      ['12-06-2017', 3]
    ]);

    var options = {
        title: 'Report Chart',
        width: 900,
        legend: { position: 'none' },
        chart: { subtitle: 'Number Of Pax' },
        axes: {
            x: {
                0: { side: 'bottom', label: 'Date' } // Top x-axis.
            }
        },
        bar: { 
           groupWidth: '100%'
        },
        vAxis: {  
            viewWindow: { max: 500 },
            format: '000'
        }    
    };

    var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    // Convert the Classic options to Material options.
    chart.draw(data, google.charts.Bar.convertOptions(options));
};

＆＃13;

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>

＆＃13;

＆＃13;

＆＃13;

<强>更新

＆＃13;

＆＃13;

google.load("visualization", "1.1", { packages: ['corechart', "bar"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.arrayToDataTable([
      ['date', 'pax'],
      ["12-05-2015", 60],
      ["12-06-2015", 31],
      ['12-06-2017', 3]
    ]);

    var options = {
        title: 'Report Chart',
        legend: { position: 'none' },
        chart: { subtitle: 'Number Of Pax' },
        axes: {
            x: {
                0: { side: 'bottom', label: 'Date' } // Top x-axis.
            }
        },
        bar: { 
           groupWidth: '100%'
        },
        vAxis: {  
            viewWindow: { min: 0, max:200 },
            format: '000'
        },
        width: 420,
        height: 640
    };

    var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
};

＆＃13;

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="top_x_div"></div>

＆＃13;

＆＃13;

＆＃13;