是否可以在垂直Google聊天折线图中包含与条形内联的单个条形标签？

Question

我正在尝试创建一个简单的谷歌线图来概述工作时间。来自Google Chart API文档的This (modified) example几乎是完美的，但要求您将鼠标悬停在每个栏上以查看该栏名称。

数据示例：

    var data = google.visualization.arrayToDataTable([
      ['Day', 'Jane', 'John', 'Joe'],
      ['13th', 3, 7, 3],
      ['14th', 1, 3, 4],
      ['15th', 5, 8, 2],
      ['16th', 4, 8, 4]
    ]);

每组可能有几十个酒吧，所以依靠这个传说可能并不容易。有没有办法包括组标签和条形标签？

Answer 1

您可以使用annotations在条形图上放置文字

annotations被添加为单独的列，
注释将显示在它所遵循的系列列上

但材料图表

不支持annotations

相反，建议使用 Core 图表，并使用以下选项...

theme: 'material'

请参阅以下工作代码段，DataView用于添加annotations ...

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart', 'bar']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Day', 'Jane', 'John', 'Joe'],
    ['13th', 3, 7, 3],
    ['14th', 1, 3, 4],
    ['15th', 5, 8, 2],
    ['16th', 4, 8, 4]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
    {
      calc: function (dt, row) {
        return dt.getColumnLabel(1)
      },
      type: 'string',
      role: 'annotation'
    },
    2,
    {
      calc: function (dt, row) {
        return dt.getColumnLabel(2)
      },
      type: 'string',
      role: 'annotation'
    },
    3,
    {
      calc: function (dt, row) {
        return dt.getColumnLabel(3)
      },
      type: 'string',
      role: 'annotation'
    }
  ]);


  var options = {
    annotations: {
      textStyle: {
        fontSize: 8
      }
    },
    hAxis: {format: 'decimal'},
    height: 400,
    colors: ['#1b9e77', '#d95f02', '#7570b3'],
    legend: {
      position: 'none'
    },
    theme: 'material'
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}

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

编辑

以下是将条形标签移动到条形图左侧/开头的示例

问题是图表会将标签移回任何交互性，例如悬停

因此，需要使用MutationObserver来了解交互发生的时间

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

然后需要知道哪些text元素是条形标签，
我们可以针对列标签进行测试

还需要知道新的x-location应该是什么，
使用chart.getChartLayoutInterface().getXLocation(0)获取值0的x位置 然后根据标签的长度进行调整......

function setBarLabels() {
  var xLoc = chart.getChartLayoutInterface().getXLocation(0) + 4;
  Array.prototype.forEach.call(container.getElementsByTagName('text'), function(barLabel) {
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
      if (data.getColumnLabel(i) === barLabel.innerHTML) {
        barLabel.setAttribute('x', xLoc + (barLabel.innerHTML.length * 4));
        break;
      }
    }
  });
}

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Day', 'Jane', 'John', 'Joe'],
    ['13th', 3, 7, 3],
    ['14th', 1, 3, 4],
    ['15th', 5, 8, 2],
    ['16th', 4, 8, 4]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
    {
      calc: function (dt, row) {
        return dt.getColumnLabel(1)
      },
      type: 'string',
      role: 'annotation'
    },
    2,
    {
      calc: function (dt, row) {
        return dt.getColumnLabel(2)
      },
      type: 'string',
      role: 'annotation'
    },
    3,
    {
      calc: function (dt, row) {
        return dt.getColumnLabel(3)
      },
      type: 'string',
      role: 'annotation'
    }
  ]);


  var options = {
    annotations: {
      textStyle: {
        fontSize: 8
      }
    },
    hAxis: {format: 'decimal'},
    height: 400,
    colors: ['#1b9e77', '#d95f02', '#7570b3'],
    legend: {
      position: 'none'
    },
    theme: 'material'
  };

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

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

  function setBarLabels() {
    var xLoc = chart.getChartLayoutInterface().getXLocation(0) + 4;
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function(barLabel) {
      for (var i = 0; i < data.getNumberOfColumns(); i++) {
        if (data.getColumnLabel(i) === barLabel.innerHTML) {
          barLabel.setAttribute('x', xLoc + (barLabel.innerHTML.length * 4));
          break;
        }
      }
    });
  }

  chart.draw(view, options);
}

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