如何为列谷歌图表添加填充

Posted 2021-04-09

我使用带有注释的列谷歌图表。对于注释设置选项alwaysOutside: true。但我有一个问题。

我的注释标签会自动向下移动最大值的列。

我怎么能解决这个问题？

我的图表选项在这里：

const chartOptions = {
  legend: 'none',
  width: 750,
  height: 285,
  bar: { groupWidth: '95%' },
  fontName: 'Open Sans',
  fontSize: 14,
  enableInteractivity: false,
  colors: ['#FF2D55', '#4772D1'],
  vAxis: {
    format: '0',
    baseline: 0,
    viewWindowMode: 'pretty',
    viewWindow: {
      min: 0
    }
  },
  annotations: {
    alwaysOutside: true,
    style: 'point',
    stem: {
      length: 5,
      color: '#FFFFFF'
    },
    textStyle: {
      fontName: 'Open Sans',
      fontSize: 16,
      bold: true,
      color: 'black',
      opacity: 1
    }
  },
  tooltip: {
    trigger: 'none'
  }
};

答案

我自己找到了解决方案。也许有人需要。

获取图表数据后，我发现系列中的最大值并动态设置选项vAxis.minValue。代码示例：

const maxValue = this.getMaxValueInSeries(chartSeries);
this.chartOptions.vAxis.minValue = maxValue + 1;

这对我有用。请享用。