Question

我做错了什么？我想在1975年的专栏上面，而不是在它上面。

[https://codepen.io/Serek/pen/QprYzP][1]

Answer 1

一个选项是在v轴上设置最大值（viewWindow.max）......

vAxis: {
  title: 'Amount',
  viewWindow: {
    max: vAxisMax
  }
},

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Q1');
  data.addColumn('number', 'Q2');
  data.addColumn('number', 'Q3');
  data.addColumn('number', 'Q4');

  data.addRow(['2016', 500, 100, 1200, 1000]);
  data.addRow(['2016', 500, 100, 1975, 1000]);
  data.addRow(['2016', 500, 100, 1200, 1000]);
  data.addRow(['2016', 500, 100, 1200, 1000]);

  // find v-axis max value
  var vAxisMax = null;
  for (var i = 1; i < data.getNumberOfColumns(); i++) {
    var range = data.getColumnRange(i);
    vAxisMax = vAxisMax || Math.ceil(range.max / 1000) * 1000;
    vAxisMax = Math.max(vAxisMax, Math.ceil(range.max / 1000) * 1000);
  }
  // add buffer for annotation
  vAxisMax += 400;

  var options = {
    chartArea: {
      top: 12,
      bottom: 24,
      left: 72
    },
    legend: {
      position: 'none'
    },
    colors: ['#9427E0'],
    vAxis: {
      title: 'Amount',
      viewWindow: {
        max: vAxisMax
      }
    },
    bar: {
      groupWidth: '90%'
    },
    annotations: {
      style: 'point',
      alwaysOutside: true
    },
    width: 1100,
    height: 300
  };

  var view = new google.visualization.DataView(data);
  view.setColumns([
    0,
    1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" },
    2, { calc: "stringify", sourceColumn: 2, type: "string", role: "annotation" },
    3, { calc: "stringify", sourceColumn: 3, type: "string", role: "annotation" },
    4, { calc: "stringify", sourceColumn: 4, type: "string", role: "annotation" }
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 2

图表似乎是自动调整垂直轴的大小，为最高的栏留出足够的空间，但不是为了它上面的注释，即使你指定了alwaysOutside: true。

一种解决方案是明确设置垂直刻度。这使得图表在顶部留下更多空间，然后它适合它上面的注释。这是您链接的代码的一个版本，它添加了这些“滴答声”：

 google.charts.load('current', {'packages':['corechart']});

  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Q1');
    data.addColumn('number', 'Q2');
    data.addColumn('number', 'Q3');
    data.addColumn('number', 'Q4');

    data.addRow(['2016', 500, 100, 1200, 1000]);
    data.addRow(['2016', 500, 100, 1975, 1000]);
    data.addRow(['2016', 500, 100, 1200, 1000]);
    data.addRow(['2016', 500, 100, 1200, 1000]);

    var options = {
        'legend': { position: 'none' },
        'colors': ['#9427E0'],
        'vAxis': {title: 'Amount',
                 // The addition:
                 // Set the largest tick bigger than the largest datum
                 ticks: [500,1000,1500,2000,2500]}, 
        'bar': {
        groupWidth: '90%'
        },
        'annotations': {
            style: 'point',
            alwaysOutside: true
        },
        'width':1100,
        'height':300};

    var view = new google.visualization.DataView(data);
    view.setColumns([
        0,
        1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" },
        2, { calc: "stringify", sourceColumn: 2, type: "string", role: "annotation" },
        3, { calc: "stringify", sourceColumn: 3, type: "string", role: "annotation" },
        4, { calc: "stringify", sourceColumn: 4, type: "string", role: "annotation" }
        ]);


    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
  }

谷歌柱形图 - 外面没有用

2 个答案: