想要在Google Chart（可视化）中的条形图中添加注释文本的顶部填充

Posted 2021-04-09

我正在使用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);

答案

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

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

有关移动注释的示例，请参阅以下工作代码段...

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>

以上是关于想要在Google Chart（可视化）中的条形图中添加注释文本的顶部填充的主要内容，如果未能解决你的问题，请参考以下文章

Python使用matplotlib可视化排序的棒棒糖图类似于排序的条形图（Lollipop Chart）

Python使用matplotlib可视化排序的条形图并且自定义设置X轴不同区域使用不同的背景色（Ordered Bar Chart）

R语言ggplot2可视化排序的柱状图（Ordered Bar Chart）自定义柱状图条形的颜色为可视化图像添加标题和副标题题注信息自定义轴坐标文本的角度

R语言ggplot2可视化可视化排序的棒棒糖图类似于排序的条形图（Lollipop Chart）为可视化图像添加标题和副标题题注信息自定义轴坐标文本的角度

无效的可视化类型：带有 angular-google-chart 的甘特图

如何使 Chart.js 条形图保持原位