数据注释排列

Question

我想按照我在这里找到的说明和google文档在Google图表上排列数据注释。这就是我现在拥有的：

https://jsfiddle.net/u6tn97km/

我无法将数据值和数据点放在一起。而是将数据值全部堆叠在一起。我该如何解决这个问题？

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'values');
  data.addColumn({id:'i0', type:'number', role:'interval'});
  data.addColumn({id:'i1', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});

  data.addRows([
[1, 19,4,7,17,20,24,26],
[2, 13,2,10,11,15,20,25],
[3, 14,7,10,10,17,20,25],
[4, 14,4,8,11,16,26,27],
[5, 12,5,8,10,13,19,21],
[6, 13,1,10,10,15,20,25],
[7, 18,7,11,13,22,23,24],
[8, 17,3,9,12,22,25,26],
[9, 25,12,20,24,26,26,27],
[10, 16,6,8,15,16,17,23],
[11, 12,1,3,6,18,18,26],
[12, 12,1,3,12,12,18,19]]);

  // The intervals data as narrow lines (useful for showing raw source data)

  var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
}, 2, {
    calc: 'stringify',
    sourceColumn: 2,
    type: 'string',
    role: 'annotation'
}, 3, {
    calc: 'stringify',
    sourceColumn: 3,
    type: 'string',
    role: 'annotation'
},  4, {

    calc: 'stringify',
    sourceColumn: 4,
    type: 'string',
    role: 'annotation'
}, 5, {

    calc: 'stringify',
    sourceColumn: 5,
    type: 'string',
    role: 'annotation'
}, 6, {

    calc: 'stringify',
    sourceColumn: 6,
    type: 'string',
    role: 'annotation'
}, 7, {

    calc: 'stringify',
    sourceColumn: 7,
    type: 'string',
    role: 'annotation'
} ]);

 var options_bars = {
      title: 'Bars, default',
      curveType: 'function',
      series: [{'color': '#D9544C'}],
      intervals: { style: 'bars',  pointSize: 9,  barWidth: 1, shortBarWidth:0.5},
     'tooltip' : { trigger: 'none'}, 
      enableInteractivity: false,  
      annotations: { stemColor: 'white', textStyle: { fontSize: 10 } },
        pointSize: 8, 
      legend: 'none',
  };

  var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
 // chart_lines.draw(data, options_bars);
   chart_lines.draw(view, options_bars); 
}

和HTML：

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_lines" style="width: 900px; height: 500px;"></div>

Answer 1

注释位于它们所代表的系列上方，
因为间隔列是角色而不是序列，所以
所有注释都堆叠在一个点上方

将注释放置在所需位置，
我们可以向图表添加其他隐藏系列，
以及新系列上方的注释

将新系列添加为数据视图中的列，
然后在新系列之后添加注释...

view.setColumns([0, 1, {
  calc: 'stringify',
  sourceColumn: 1,
  type: 'string',
  role: 'annotation'
}, 2, 3, 4, 5, 6, 7, {  // new series start here, after all the original columns
  calc: function (dt, row) {
    return dt.getValue(row, 2);
  },
  type: 'number'
}, {
  calc: 'stringify',
  sourceColumn: 2,
  type: 'string',
  role: 'annotation'
}, {
  calc: function (dt, row) {
    return dt.getValue(row, 3);
  },
  type: 'number'
}, {
  calc: 'stringify',
  sourceColumn: 3,
  type: 'string',
  role: 'annotation'
}, {
...

要隐藏新系列，请使用系列选项将类型更改为散点，然后将pointSize设置为零

series: {
  1: {
    pointSize: 0,
    type: 'scatter'
  },
  2: {
    pointSize: 0,
    type: 'scatter'
  },
  ...  

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

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'values');
  data.addColumn({id:'i0', type:'number', role:'interval'});
  data.addColumn({id:'i1', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});

  data.addRows([
    [1, 19,4,7,17,20,24,26],
    [2, 13,2,10,11,15,20,25],
    [3, 14,7,10,10,17,20,25],
    [4, 14,4,8,11,16,26,27],
    [5, 12,5,8,10,13,19,21],
    [6, 13,1,10,10,15,20,25],
    [7, 18,7,11,13,22,23,24],
    [8, 17,3,9,12,22,25,26],
    [9, 25,12,20,24,26,26,27],
    [10, 16,6,8,15,16,17,23],
    [11, 12,1,3,6,18,18,26],
    [12, 12,1,3,12,12,18,19]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
  }, 2, 3, 4, 5, 6, 7, {
    calc: function (dt, row) {
      return dt.getValue(row, 2);
    },
    type: 'number'
  }, {
    calc: 'stringify',
    sourceColumn: 2,
    type: 'string',
    role: 'annotation'
  }, {
    calc: function (dt, row) {
      return dt.getValue(row, 3);
    },
    type: 'number'
  }, {
    calc: 'stringify',
    sourceColumn: 3,
    type: 'string',
    role: 'annotation'
  }, {
    calc: function (dt, row) {
      return dt.getValue(row, 4);
    },
    type: 'number'
  }, {
    calc: 'stringify',
    sourceColumn: 4,
    type: 'string',
    role: 'annotation'
  }, {
    calc: function (dt, row) {
      return dt.getValue(row, 5);
    },
    type: 'number'
  }, {
    calc: 'stringify',
    sourceColumn: 5,
    type: 'string',
    role: 'annotation'
  }, {
    calc: function (dt, row) {
      return dt.getValue(row, 6);
    },
    type: 'number'
  }, {
    calc: 'stringify',
    sourceColumn: 6,
    type: 'string',
    role: 'annotation'
  }, {
    calc: function (dt, row) {
      return dt.getValue(row, 7);
    },
    type: 'number'
  }, {
    calc: 'stringify',
    sourceColumn: 7,
    type: 'string',
    role: 'annotation'
  }]);

  var options_bars = {
    title: 'Bars, default',
    colors: ['#d9544c'],
    curveType: 'function',
    series: {
      1: {
        pointSize: 0,
        type: 'scatter'
      },
      2: {
        pointSize: 0,
        type: 'scatter'
      },
      3: {
        pointSize: 0,
        type: 'scatter'
      },
      4: {
        pointSize: 0,
        type: 'scatter'
      },
      5: {
        pointSize: 0,
        type: 'scatter'
      },
      6: {
        pointSize: 0,
        type: 'scatter'
      },
      7: {
        pointSize: 0,
        type: 'scatter'
      }
    },
    intervals: {style: 'bars', pointSize: 9, barWidth: 1, shortBarWidth: 0.5},
    tooltip : {trigger: 'none'},
    enableInteractivity: false,
    annotations: {stemLength: 2, stemColor: 'transparent', textStyle: {fontSize: 10}},
    pointSize: 8,
    legend: 'none',
  };

  var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
  chart_lines.draw(view, options_bars);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_lines" style="width: 900px; height: 500px;"></div>