使用注释移动Google Chart列注释位置:行 [英] Moving Google Chart column annotation position using annotation: line
问题描述
使用下面的例子,当使用 style:'line'$ c $时,是否可以移动注释,使它们全部出现在图形底部的相同(静态)位置(这使得注释可以垂直读取)?
google.charts.load('current',{
callback:function(){
drawChart();
window.addEventListener('resize',drawChart,false);
},
packages:['corechart']
});
$ b函数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,
角色:注释
},
2,
{
calc:stringify,
sourceColumn:2,
类型:string,
角色:注释
}]);
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);
//移动注释
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(容器,{
childList:true,
subtree:true
});
chart.draw(view,options);
$ / code>
以下是一个JSFiddle示例: http://jsfiddle.net/tVCv9/340/
这就是我我试图达到目的: -
< img src =https://i.stack.imgur.com/YxA0h.pngalt =在这里输入图片描述>
看起来像是你找到了一个移动注释的例子,但是在这种情况下,因为 请参阅以下工作片段... Using the below example, is it possible to move the annotations so they all appear at the same (static) position at the bottom of the graph when using Here is an example JSFiddle: http://jsfiddle.net/tVCv9/340/ This is what I am trying to achive:- looks like you found an example for moving the annotations, see following working snippet...
这篇关于使用注释移动Google Chart列注释位置:行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! style:'line'
正被使用,
您必须调整'y'
属性以及'rotation'$ c
google.charts.load('current',{pac kages:['corechart']})。then(function(){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 ',角色:'annotation'}]); var options = {annotations:{style:'line',textStyle:{fontSize:8,color:'black',strokeSize:0,auraColor:'transparent'},alwaysOutside:true,stem:{color:'transparent', },},legend:'none',height:270,chartArea:{width:'80%',height:'80%'},bar:{groupWidth:'80%'},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); //移动注释google.visualization.events.addListener(图表,'ready',function(){var chartLayout = chart.getChartLayoutInterface(); var yLocation = chartLayout.getYLocation(0)+ options.annotations.textStyle.fontSize; var observer = new MutationObserver(function(){Array.prototype.forEach.call(container.getElementsByTagName('text'),function(annotation){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',yLocation); annotation.setAttribute('transform',rotate);}});}); observer.observe(container,{childList:true,subtree :true});}); chart.draw(view,options);});
< script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =northPMChart>< / div>
style: 'line'
(which makes the annotations read vertically)?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);
}
however in this case, since style: 'line'
is being used,
you must adjust both the 'y'
attribute, as well as 'rotation'
google.charts.load('current', {
packages:['corechart']
}).then(function () {
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 = {
annotations: {
style: 'line',
textStyle: {
fontSize: 8,
color: 'black',
strokeSize: 0,
auraColor: 'transparent'
},
alwaysOutside: true,
stem:{
color: 'transparent',
},
},
legend: 'none',
height: 270,
chartArea: {
width: '80%',
height: '80%'
},
bar: {
groupWidth: '80%'
},
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
google.visualization.events.addListener(chart, 'ready', function () {
var chartLayout = chart.getChartLayoutInterface();
var yLocation = chartLayout.getYLocation(0) + options.annotations.textStyle.fontSize;
var observer = new MutationObserver(function () {
Array.prototype.forEach.call(container.getElementsByTagName('text'), function(annotation) {
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', yLocation);
annotation.setAttribute('transform', rotate);
}
});
});
observer.observe(container, {
childList: true,
subtree: true
});
});
chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="northPMChart"></div>