javascript - Google Charts - 具有相同值的相邻列的共享标签

Question

我有一个 Google 图表，它显示包含相同值的相邻行的重复值。如果相邻列代表的值相同，是否有办法让它们共享一个标签？

Answer 1

没有防止注释重复的标准选项，
但这些可以很容易地删除

---

1)

如果注释值作为数据的一部分加载，
并且您不想更改数据的加载方式

使用一个简单的例程将注释设置为null

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

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Members', {role: 'annotation'}],
    ['2015-09', 0, '0'],
    ['2015-10', 0, '0'],
    ['2015-11', 0, '0'],
    ['2015-12', 0, '0'],
    ['2016-01', 1, '1'],
    ['2016-02', 1, '1'],
    ['2016-03', 1, '1'],
    ['2015-04', 3, '3'],
    ['2016-05', 3, '3'],
    ['2016-06', 3, '3'],
    ['2016-07', 3, '3'],
    ['2016-08', 3, '3'],
    ['2016-09', 3, '3'],
    ['2016-10', 4, '4'],
    ['2016-11', 6, '6'],
    ['2016-12', 6, '6'],
    ['2017-01', 8, '8'],
    ['2017-02', 8, '8'],
    ['2017-03', 8, '8'],
  ]);

  // remove repeated annotations
  var annotationText = null;
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    if (annotationText === data.getValue(i, 2)) {
      data.setValue(i, 2, null);
    } else {
      annotationText = data.getValue(i, 2);
    }
  }

  var options = {
    annotations: {
      alwaysOutside: true,
      textStyle: {
        bold: true,
        fontSize: 20
      }
    },
    colors: ['#0097A7'],
    hAxis: {
      slantedText: true,
      textStyle: {
        bold: true,
        fontSize: 16
      }
    },
    height: 400,
    legend: {
      position: 'none'
    },
    vAxis: {
      title: data.getColumnLabel(1)
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(data, options);
};

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

---

2)

如果使用 DataView 设置注释值，
修改calc函数不重复标注

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

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Members'],
    ['2015-09', 0],
    ['2015-10', 0],
    ['2015-11', 0],
    ['2015-12', 0],
    ['2016-01', 1],
    ['2016-02', 1],
    ['2016-03', 1],
    ['2015-04', 3],
    ['2016-05', 3],
    ['2016-06', 3],
    ['2016-07', 3],
    ['2016-08', 3],
    ['2016-09', 3],
    ['2016-10', 4],
    ['2016-11', 6],
    ['2016-12', 6],
    ['2017-01', 8],
    ['2017-02', 8],
    ['2017-03', 8],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      if (row > 0) {
        if (dt.getValue(row, 1) === dt.getValue(row - 1, 1)) {
          return null;
        }
      }
      return dt.getFormattedValue(row, 1);
    },
    role: 'annotation',
    type: 'string'
  }]);

  var options = {
    annotations: {
      alwaysOutside: true,
      textStyle: {
        bold: true,
        fontSize: 20
      }
    },
    colors: ['#0097A7'],
    hAxis: {
      slantedText: true,
      textStyle: {
        bold: true,
        fontSize: 16
      }
    },
    height: 400,
    legend: {
      position: 'none'
    },
    vAxis: {
      title: data.getColumnLabel(1)
    }
  };

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

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