Question

在两组的分组的柱形图中，当另一列的高度为0时，我想将该列居中。

例如，

2013年至2016年的条形图应以年份标签为中心。这是因为组中的第二个值是0，所以条形的高度是0，所以没有条形显示：

  data = [
     ["2012", 900, 950],
     ["2013", 1000, 0],
     ["2014", 1170, 0],
     ["2015", 1250, 0],
     ["2016", 1530, 0]
  ];

我该如何使用Google图表？

Answer 1

请参阅以下工作片段...

条形图居中，空白条居中。
但是，一旦用户将其悬停，它就会中断。

条形图由<rect>元素表示，
用于绘制图表本身，网格线，图例栏等。
3个<rect>元素用于突出显示悬停的栏。

这是破坏下面代码的原因，它摆脱了寻找小节的例程。

这是现在的工作方式...

条/ <rect>元素的数量与行和系列的数量相同，
即使不可见条。
它们将在元素列表中排在最后。
最后一个<rect>元素是x轴。

下面的代码向后工作，跳过最后一个元素，
并计算每行/系列的数量，以收集可能需要移动的条形图。

当用户悬停时，插入了3个元素，因此例程需要更改以适应。
并且还需要移动它们以正确突出显示。

否则，您可以关闭交互并完成...

enableInteractivity: false

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["Year", "Asia", "Mama"],
    ["2012", 900, 950],
    ["2013", 1000, 0],
    ["2014", 1170, 0],
    ["2015", 1250, 0],
    ["2016", 1530, 0]
  ]);

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 32,
      left: 48,
      right: 128,
      bottom: 48
    },
    height: 400,
    width: '100%'
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    // get chart layout
    var chartLayout = chart.getChartLayoutInterface();

    // create mutation observer
    var observer = new MutationObserver(function () {
      // get bar elements
      var rects = container.getElementsByTagName('rect');
      var barLength = data.getNumberOfRows() * (data.getNumberOfColumns() - 1);
      var bars = [];
      for (var i = rects.length - 1; i > ((rects.length - 1) - (barLength + 1)); i--) {
        if (i < (rects.length - 1)) {
          bars.unshift(rects[i]);
        }
      }

      // process each row
      for (var r = 0; r < data.getNumberOfRows(); r++) {
        // process each series
        for (var s = 1; s < data.getNumberOfColumns(); s++) {
          // get chart element bounds
          var boundsBar = chartLayout.getBoundingBox('bar#' + (s - 1) + '#' + r);
          var boundsLabel = chartLayout.getBoundingBox('hAxis#0#label#' + r);

          // determine if bar is hidden
          if (boundsBar.height < 1) {
            // determine series shown, new x coordinate
            var seriesShown = (s === 1) ? 1 : 0;
            var xCoord = boundsLabel.left + (boundsLabel.width / 2);

            // move bar
            bars[r + (data.getNumberOfRows() * seriesShown)].setAttribute('x', (xCoord - (boundsBar.width / 2)));
          }
        }
      }
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  chart.draw(data, options);
});

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

Google图表，柱形图-如何在X轴标签上居中对齐列？

1 个答案: