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

Question

目前我正在使用"Top-X Chart"格式进行编码。
https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#data-format

但是我想设置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));
      };

我知道使用此 google 图表对我来说会更有用，但我并不真正理解代码：https://jsfiddle.net/u6fdbd6L/1/

例如
-无法理解为什么 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 属性设置一组条的宽度，下面的示例演示如何在它们之间设置无 space：

bar: { 
    groupWidth: '100%'
}

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

vAxis: {  
    viewWindow: { max: 100 }
}

完整示例

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));
};

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

更新

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));
};

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

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

Google Charts: How to set Column max value and without big gap in between. (Columns)

charts

google-visualization

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

Google Charts: How to set Column max value and without big gap in between. (Columns)

charts

google-visualization

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