Question

我想在Google图表折线图中的每一行旁边显示标签。有人能指出我应该设置的选项吗？与注释有什么关系？

Answer 1

你可以使用注释来标记系列中的一个点。

注释作为列添加 data.addColumn({role: 'annotation', type: 'string'});

每个注释列应该遵循它所代表的值列。

查看问题中的图像，看起来每个系列只需要一个注释或标签因此，将注释列的值设置为null，最后一行除外。

参见以下示例......

注释有一些可自定义的设置，请参阅特定图表的configuration options ...

＆＃13;

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Week');
    data.addColumn('number', 'NO');
    data.addColumn({role: 'annotation', type: 'string'});
    data.addColumn('number', 'UK');
    data.addColumn({role: 'annotation', type: 'string'});
    data.addColumn('number', 'NL');
    data.addColumn({role: 'annotation', type: 'string'});
    data.addColumn('number', 'DK');
    data.addColumn({role: 'annotation', type: 'string'});
    data.addColumn('number', 'SE');
    data.addColumn({role: 'annotation', type: 'string'});
    data.addColumn('number', 'FI');
    data.addColumn({role: 'annotation', type: 'string'});
    data.addColumn('number', 'IL');
    data.addColumn({role: 'annotation', type: 'string'});
    data.addColumn('number', 'US 2014');
    data.addColumn({role: 'annotation', type: 'string'});

    var currentWeek = 27;
    var ticks = [];
    for (var i = 0; i < 52; i++) {
      ticks.push(i + 1);
      var row = [];
      if (i < currentWeek) {
        row.push(i + 1);
        for (var x = 1; x < data.getNumberOfColumns(); x=x+2) {
          var value = x * (Math.pow(i, 3));
          var annot = null;
          if (i === (currentWeek - 1)) {
            annot = data.getColumnLabel(x) + ' - ' + value;
          }
          row.push(value, annot);
        }
        data.addRow(row);
      }
    }

    new google.visualization.LineChart(document.getElementById('chart_div')).draw(data, {
      annotations: {
        stem: {
          length: 0
        }
      },
      chartArea: {
        width: '80%'
      },
      hAxis: {
        format: 'Week 0',
        ticks: ticks
      },
      height: 600
    });
  },
  packages: ['corechart']
});

＆＃13;

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

＆＃13;

在谷歌图表中显示线条图例标签

1 个答案: