Javascript 使用注释：行移动Google图表列注释位置

使用下面的示例，当使用

样式：“line'

（使注释垂直读取）时，是否可以移动注释，使它们都显示在图形底部的相同（静态）位置

下面是一个JSFIDLE示例：

这就是我想要实现的目标：-

---

看起来您找到了移动批注的示例，
但是在这种情况下，由于使用了

style:'line'

，
您必须同时调整

'y'

属性和

'rotation'

请参阅以下工作片段

google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var data=google.visualization.arrayToDataTable([
[“类型”、“完成”、“未完成”]，
['', 75, 25],
['', 50, 40],
['', 80, 15]
]);
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,1{
计算：'字符串化'，
资料来源专栏：1，
键入：“字符串”，
角色：“注释”
}, 2, {
计算：'字符串化'，
资料来源专栏：2，
键入：“字符串”，
角色：“注释”
}]);
变量选项={
注释：{
风格：'线条'，
文本样式：{
字体大小：8，
颜色：'黑色'，
strokeSize:0，
auraColor:“透明”
},
总是这样：是的，
茎：{
颜色：'透明'，
},
},
图例：“无”，
身高：270，
图表区：{
宽度：“80%”，
身高：“80%”
},
酒吧：{
groupWidth:'80%'
},
言辞：{
text位置：“无”，
网格线：{
颜色：“透明”
}
},
系列：{
0:{颜色：'#00A887'}，
1:{颜色：'#F6323E'}，
}
};
var container=document.getElementById（'northPMChart'）；
var chart=新的google.visualization.ColumnChart（容器）；
//移动注释
google.visualization.events.addListener（图表'ready'，函数（）{
var chartLayout=chart.getChartLayoutInterface（）；
var yLocation=chartLayout.getYLocation（0）+options.annotations.textStyle.fontSize；
var observer=新的MutationObserver（函数（）{
Array.prototype.forEach.call（container.getElementsByTagName（'text'）、函数（注释）{
if（（annotation.getAttribute（'text-anchor'）=='middle'）&&
（parseInt（annotation.getAttribute（'font-size'））==options.annotations.textStyle.fontSize））{
var rotate='rotate（270'+annotation.getAttribute（'x'）++'+yLocation++'）；
annotation.setAttribute（'y'，y位置）；
annotation.setAttribute（'transform'，rotate）；
}
});
});
观察者，观察（容器{
儿童名单：是的，
子树：真
});
});
图表绘制（视图、选项）；
});
完美！谢谢@WhiteHat
google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Type', 'Completed', 'Outstanding'],
        ['', 75, 25],
        ['', 50, 40],
        ['', 80, 15]
    ]);

    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"
        }]);

    var options = {
        legend: 'none',
        height: 270,
        chartArea: { 'width': '80%', 'height': '80%' },
        bar: { groupWidth: '80%' },
            annotations: {
              style: 'line',
                textStyle: {
                fontSize: 8,
                color: 'black',
                strokeSize: 0,
                auraColor: 'transparent'
              },
              alwaysOutside: true,  
              stem:{
                            color: 'transparent',
                          },   
            },        
        vAxis: {
            textPosition: 'none',
            gridlines: {
                color: 'transparent'
            }
        },
      series: {
          0: { color: '#00A887' },
          1: { color: '#F6323E' },
        }

    };

    var container = document.getElementById('northPMChart');
    var chart = new google.visualization.ColumnChart(container);

    // move annotations
    var observer = new MutationObserver(function () {
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function(annotation) {
        if ((annotation.getAttribute('text-anchor') === 'middle') &&
            (annotation.getAttribute('fill') === '#ffffff')) {
          var chartLayout = chart.getChartLayoutInterface();
          annotation.setAttribute('y',
            chartLayout.getYLocation(0) - (parseInt(annotation.getAttribute('font-size')) / 2)
          );
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });

    chart.draw(view, options);
}