Charts 数据注释安排

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

我无法将数据值和数据点放在一起。相反，数据值都堆叠在一起。我如何解决这个问题

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>

---

注释放在它们所代表的系列之上，
由于间隔列是角色而不是系列，
所有注释都堆叠在一个点的上方

要将注释放置在所需位置，
我们可以在图表中添加额外的隐藏序列，
以及新系列上方的注释

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

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'
}, {
...

要隐藏新序列，请使用“序列”选项将类型更改为“分散”，并将

点大小设置为零

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

请参阅以下工作片段


google.charts.load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'number'，'x'）；
data.addColumn（'number'，'values'）；
addColumn（{id:'i0'，类型：'number'，角色：'interval'}）；
addColumn（{id:'i1'，类型：'number'，角色：'interval'}）；
addColumn（{id:'i2'，类型：'number'，角色：'interval'}）；
addColumn（{id:'i2'，类型：'number'，角色：'interval'}）；
addColumn（{id:'i2'，类型：'number'，角色：'interval'}）；
addColumn（{id:'i2'，类型：'number'，角色：'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=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,1{
计算：'字符串化'，
资料来源专栏：1，
键入：“字符串”，
角色：“注释”
}, 2, 3, 4, 5, 6, 7, {
计算：函数（dt，行）{
返回dt.getValue（第2行）；
},
键入：“数字”
}, {
计算：'字符串化'，
资料来源专栏：2，
键入：“字符串”，
角色：“注释”
}, {
计算：函数（dt，行）{
返回dt.getValue（第3行）；
},
键入：“数字”
}, {
计算：'字符串化'，
资料来源专栏：3，
键入：“字符串”，
角色：“注释”
}, {
计算：函数（dt，行）{
返回dt.getValue（第4行）；
},
键入：“数字”
}, {
计算：'字符串化'，
资料来源专栏：4，
键入：“字符串”，
角色：“注释”
}, {
计算：函数（dt，行）{
返回dt.getValue（第5行）；
},
键入：“数字”
}, {
计算：'字符串化'，
资料来源专栏：5，
键入：“字符串”，
角色：“注释”
}, {
计算：函数（dt，行）{
返回dt.getValue（第6行）；
},
键入：“数字”
}, {
计算：'字符串化'，
资料来源专栏：6，
键入：“字符串”，
角色：“注释”
}, {
计算：函数（dt，行）{
返回dt.getValue（第7行）；
},
键入：“数字”
}, {
计算：'字符串化'，
资料来源专栏：7，
键入：“字符串”，
角色：“注释”
}]);
变量选项\u条={
标题：“条，默认值”，
颜色：['#d9544c']，
curveType:'函数'，
系列：{
1: {
点大小：0，
键入：“散布”
},
2: {
点大小：0，
键入：“散布”
},
3: {
点大小：0，
键入：“散布”
},
4: {
点大小：0，
键入：“散布”
},
5: {
点大小：0，
键入：“散布”
},
6: {
点大小：0，
键入：“散布”
},
7: {
点大小：0，
键入：“散布”
}
},
间隔：{style:'bar'，pointSize:9，barWidth:1，shortBarWidth:0.5}，
工具提示：{trigger:'none'}，
EnableInteractive:false，
注释：{stemLength:2，stemColor:'transparent'，textStyle:{fontSize:10}，
点数：8，
图例：“无”，
};
var chart_lines=new google.visualization.LineChart（document.getElementById（'chart_lines'）；
图表线。绘制（视图、选项栏）；
}