Charts 谷歌图表将注释位置移动到堆叠图表的中心
我用的是谷歌图表的柱状图。该图表是一个堆叠柱形图,具有堆叠柱的每个数据点的注释。注释位于条内部的顶部,但我希望它们位于条内部的中心。我找到的最接近的解决方案是将非堆叠柱形谷歌图表的注释移到底部 此解决方案的问题是,代码查找白色注释并将其移动到底部。我正在处理的图形有多个注释颜色,该颜色的所有注释都移动到堆叠柱子集的顶部与中心Charts 谷歌图表将注释位置移动到堆叠图表的中心,charts,annotations,position,google-visualization,stacked,Charts,Annotations,Position,Google Visualization,Stacked,我用的是谷歌图表的柱状图。该图表是一个堆叠柱形图,具有堆叠柱的每个数据点的注释。注释位于条内部的顶部,但我希望它们位于条内部的中心。我找到的最接近的解决方案是将非堆叠柱形谷歌图表的注释移到底部 此解决方案的问题是,代码查找白色注释并将其移动到底部。我正在处理的图形有多个注释颜色,该颜色的所有注释都移动到堆叠柱子集的顶部与中心 google.charts.setOnLoadCallback(drawChart); function drawChart() { var data
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Range', 'score range A',{role: 'style'},{ role: 'annotation' }, 'score range B',{role: 'style'},{ role: 'annotation' }, 'score range C', {role: 'style'},{ role: 'annotation' },'score range D', {role: 'style'},{ role: 'annotation' }],
['Range', 4,'#D7F0B4','0-4',6,'#00B050','5-10',9,'#92D050','11-19',6, '#AAE182','20-25']
]);
var options = {
vAxis:{ ticks: [0,4,10,19], viewWindow: { max: 25} },
isStacked: true,
title: 'Score',
legend: {position: 'none'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('idealchartA'));
chart.draw(data, options);
}
@Whitehat解决了上述问题,但当我看到另一列中的一些注释值为null时,定位被抛出
这是我试图添加的新数据系列
['Range',4','D7F0B4','0-4',6','00B050','5-10',9','92D050','11-19',6','AAE182','20-25',['Yours',4','white;填充不透明度:0',null,6','00B050',10,9','white;填充不透明度:0',null,6','white;填充不透明度:0',null]
这个想法是要有一个图表,如下图所示,但注释居中。
与另一个问题类似,只需要找到找到注释的方法。
这里,我们使用
文本锚定
属性,假设它不是x轴标签
然后我们可以使用chart方法getChartLayoutInterface
来计算新位置
请参阅以下工作片段
google.charts.load('current'{
软件包:['corechart']
}).然后(函数(){
var data=google.visualization.arrayToDataTable([
['Range','score Range A',{role:'style'},{role:'annotation'},'score Range B',{role:'style'},{role:'style'},{role:'annotation'},'score Range D',{role:'style'},{role:'annotation'},{role:'annotation'},
[Range',4',D7F0B4',0-4',6',00B050',5-10',9',92D050',11-19',6',AAE182',20-25']
]);
变量选项={
变量:{ticks:[0,4,10,19],视图窗口:{max:25},
isStacked:是的,
标题:“得分”,
图例:{位置:'none'}
};
var container=document.getElementById('idealchartA');
var chart=新的google.visualization.ColumnChart(容器);
google.visualization.events.addListener(图表'ready',函数(){
var observer=新的变异观察者(moveAnnotations);
观察者,观察(容器{
儿童名单:是的,
子树:真
});
});
函数moveAnnotations(){
var chartLayout=chart.getChartLayoutInterface();
巴氏变种;
labelBounds变种;
var yAdj;
var labels=container.getElementsByTagName('text');
var指数=0;
Array.prototype.forEach.call(标签,函数(标签){
如果((label.getAttribute('text-anchor')==='middle')&&(label.textContent!==data.getValue(0,0))){
barBounds=chartLayout.getBoundingBox('bar#'+index+'#0');
labelBounds=chartLayout.getBoundingBox('annotationtext#'+索引+'#0#0');
yAdj=(barBounds.height/2)+(parseFloat(label.getAttribute('font-size'))/2);
label.setAttribute('y',barBounds.top+yAdj);
索引++;
}
});
}
图表绘制(数据、选项);
});代码>
我添加了一个带有空值的新堆叠列作为注释,但这使javascript失效,因为它可以计算空值的距离。[Range',4',D7F0B4',0-4',6',00B050',5-10',9',92D050',11-19',6',AAE182',20-25',[Yours',4',白色;填充不透明度:0',null,6',00B050',10,9',白色;填充不透明度:0',null,6',白色;填充不透明度:0',null]