首页 > 解决方案 > 如何为列 google-charts 添加填充

问题描述

我使用带有注释的列 google-chart。对于注释集选项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'
  }
};

标签: google-visualization

解决方案


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

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

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

这对我有用。享受。


推荐阅读