想要在谷歌图表的条形图中添加顶部填充（可视化）答案

【问题标题】：Want to add top padding on annotation text in bar chart in Google Chart (Visualization)想要在谷歌图表的条形图中添加顶部填充（可视化）
【发布时间】：2018-09-13 13:33:14
【问题描述】：

我正在使用 Google Chart 的条形图。顶部的每个栏都有注释，在栏的内部，我想在栏顶线和注释文本之间创建更多的空间（超过默认值）。我还没有找到任何方法在注释文本周围创建顶部填充（或顶部边距）。

这是我的代码：

var data = google.visualization.arrayToDataTable([
                [USER_AVERAGE, 'User Average', { role: 'style' }],
                ['SANDRA COOMBS', 8.6, '#008FBE'],
                ['STEVE ADAMS', 4.3, '#008FBE'],
            ]);

            var view = new google.visualization.DataView(data);
            view.setColumns([0, 1, 2,
                {
                    calc: "stringify",
                    sourceColumn: 1,
                    type: "string",
                    role: "annotation"
                }]);
            var options = {
                legend: {
                    position: 'none'
                },
                chartArea: { width: width, height: height, right: right },
                isStacked: true,
                orientation: orientation.orientation,
                fontSize: '12',
                fontName: 'OpenSans-Regular',
                hAxis: {
                    viewWindowMode: 'maximized',
                },
                vAxis: {
                    viewWindowMode: 'maximized',
                },
                animation: {
                    startup: true,
                    duration: 1500,
                    easing: 'out',
                },
            };
            var chart = new google.visualization.ColumnChart(document.getElementById("averageDaysChart"));
            chart.draw(view.toDataTable(), options);

【问题讨论】：

标签： javascript charts bar-chart google-visualization

【解决方案1】：

注释填充、位置等没有配置选项...

但是，您可以在图表的 'animationfinish' 事件中手动移动它们
但是，必须使用MutationObserver，
因为图表会将它们移回交互性，
例如当您悬停列时。

有关移动注释的示例，请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
      ['USER_AVERAGE', 'User Average', { role: 'style' }],
      ['SANDRA COOMBS', 8.6, '#008FBE'],
      ['STEVE ADAMS', 4.3, '#008FBE'],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 2,
      {
          calc: "stringify",
          sourceColumn: 1,
          type: "string",
          role: "annotation"
      }]);
  var options = {
      legend: {
          position: 'none'
      },
      //chartArea: { width: width, height: height, right: right },
      isStacked: true,
      //orientation: orientation.orientation,
      fontSize: '12',
      fontName: 'OpenSans-Regular',
      hAxis: {
          viewWindowMode: 'maximized',
      },
      vAxis: {
          viewWindowMode: 'maximized',
      },
      animation: {
          startup: true,
          duration: 1500,
          easing: 'out',
      },
  };

  var container = document.getElementById("averageDaysChart");
  var chart = new google.visualization.ColumnChart(container);

  google.visualization.events.addListener(chart, 'animationfinish', function () {
    moveAnnotations();
    var observer = new MutationObserver(moveAnnotations);
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  var originalY = {};
  function moveAnnotations() {
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      if ((!isNaN(parseFloat(label.textContent))) && (label.getAttribute('text-anchor') === 'middle')) {
        if (!originalY.hasOwnProperty(label.textContent)) {
          originalY[label.textContent] = parseFloat(label.getAttribute('y'));
        }
        label.setAttribute('y', originalY[label.textContent] + 20);
      }
    });
  }

  chart.draw(view.toDataTable(), options);
});

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

【讨论】：

完成。非常感谢。兄弟，你让我开心。

【解决方案2】：

不需要动画钩子或 MutationObserver，只需为此使用良好的老式 CSS。

对于柱形图和条形图，您只想将“填充”应用于位于条形本身内的注释。仅当注释文本适合条形时，它才会放置在条内。当放置在里面时，它被赋予了白色的文本颜色，所以让我们定位它。

#averageDaysChart text[fill="#ffffff"] {
    transform: translateY(10px);
}

【讨论】：