Charts 自定义样式谷歌条形图

有没有可能完成一个谷歌条形图，看起来像这样

具有自定义样式的每个栏的末端

注释位于行下方（目标10.3）

---

可以使用图表布局方法将图标或任何元素添加到条形图的末尾

  // add icon to bar
  var barBounds = layout.getBoundingBox('bar#0#0');
  var icon = chart.getContainer().appendChild(document.createElement('span'));
  icon.className = 'icon';
  icon.style.top = (barBounds.top + containerBounds.top - 3) + 'px';
  icon.style.left = (barBounds.left + containerBounds.left + (barBounds.width) - 24) + 'px';
  icon.innerHTML = '<i class="fas fa-arrow-alt-circle-right"></i>';

请参阅以下工作片段

google.charts.load（'current'{
软件包：['corechart']
}).然后（绘制水平图、门户、名称、斯特拉、约克、霍兹、月份、点数）；
功能图水平图入口名称斯特拉约克霍兹月点数（）{
var data=google.visualization.arrayToDataTable([
[“”，“目标达成”、{role:'style'}、{role:'style'}、{role:'annotation'}、{role:'annotation'}、{，
[1,1.5，“不透明度：.75；”，13.1，“不透明度：0；”，“目标13.1分”]
]);
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,3,4]）；
变量选项={
标题：“”，
宽度：“100%”，
身高：132，
图表区：{
高度：“100%”，
宽度：“100%”，
排名：36，
左：18，
右：18，
底数：48
},
哈克斯：{
标题：“”，
最小值：0，
网格线：{
计数：6
},
格式：“0”
},
酒吧：{
群组宽度：“60%”
},
图例：{
位置：“顶部”
},
系列：{
0: {
颜色：“#70b5c5”，
visibleInLegend:false
}，//实现目标
1: {
颜色：'#000000'，
键入：“行”，
注释：{
文本样式：{
颜色：'#000000'
},
茎：{
颜色：'透明'，
长度：-128
},
垂直：对
}
}//目标
},
言辞：{
网格线：{
颜色：“透明”
},
记号：[{v:1，f:''}]
}
};
var chart=new google.visualization.BarChart（document.getElementById（“门户名称stella york horz month points”）；
google.visualization.events.addListener（图表，'click'，函数（e）{
log（JSON.stringify（e））；
});
google.visualization.events.addListener（图表'ready'，函数（）{
//初始变量
var layout=chart.getChartLayoutInterface（）；
var containerBounds=chart.getContainer（）.getBoundingClientRect（）；
var svg=chart.getContainer（）.getElementsByTagName（'svg'）[0]；
var svgNS=svg.namespaceURI；
var xLoc=drawVAxisLine（图表、布局、数据.getValue（0,3））；
//将图像添加到工具栏
var barBounds=layout.getBoundingBox（'bar#0#0'）；
var icon=chart.getContainer（）.appendChild（document.createElement（'span'）；
icon.className='icon'；
icon.style.top=（barBounds.top+containerBounds.top-3）+“px”；
icon.style.left=（barBounds.left+containerBounds.left+（barBounds.width）-24）+“px”；
icon.innerHTML=''；
//添加注释
var labelCopy=svg.getElementsByTagName（'text'）[0]；
var注释=labelCopy.cloneNode（true）；
appendChild（注释）；
setAttribute（'text-anchor'，'middle'）；
annotation.textContent=data.getValue（0，data.getNumberOfColumns（）-1）；
注释.setAttribute（'x'，xLoc）；
annotation.setAttribute（'y'，
layout.getYLocation（0）+（parseInt（annotation.getAttribute（'font-size'））*3）
);
});
图表绘制（视图、选项）；
}
jQuery（窗口）.resize（函数（）{
绘制水平图、门户、名称、斯特拉、约克、荷尔兹、月份、点数（）；
});
函数drawVAxisLine（图表、布局、值）{
var chartArea=layout.getChartAreaBoundingBox（）；
var svg=chart.getContainer（）.getElementsByTagName（'svg'）[0]；
var xLoc=layout.getXLocation（值）
appendChild（createLine（xLoc，chartArea.top+chartArea.height，xLoc，chartArea.top，#000000'，2））；//轴线
返回xLoc；
}
函数createLine（x1、y1、x2、y2、颜色、w）{
var line=document.createElements（'http://www.w3.org/2000/svg","行",；
line.setAttribute（'x1'，x1）；
line.setAttribute（'y1'，y1）；
line.setAttribute（'x2'，x2）；
line.setAttribute（'y2'，y2）；
line.setAttribute（'stroke'，color）；
line.setAttribute（'笔划宽度'，w）；
回流线；
}

。图标{
字体大小：32px；
位置：绝对位置；
}

非常感谢。箭头现在放置在条形图上。但是，我需要在thumb

thumb.src

中使用一个图标作为工具栏上的图像。我该怎么做？我需要这个。我可以在这里使用FA图标吗？很抱歉回复太晚。我旅行了一个星期。现在将继续使用它。工作！！再次感谢@WhiteHat:）我在上发布了另一个问题。我怎样才能做到这一点？

  // add annotation
  var labelCopy = svg.getElementsByTagName('text')[0];
  var annotation = labelCopy.cloneNode(true);
  svg.appendChild(annotation);
  annotation.setAttribute('text-anchor', 'middle');
  annotation.textContent = data.getValue(0, data.getNumberOfColumns() -1);
  annotation.setAttribute('x', xLoc);
  annotation.setAttribute('y',
    layout.getYLocation(0) + (parseInt(annotation.getAttribute('font-size')) * 3)
  );