我被指派实施一些图表,老板要求我将图表的标题与图表分开,我试图将图表的区域从顶部稍微移开,但标题也随图表一起移动,如同这样:
我尝试使用:chartArea:{top:80}
,结果就是截图。我确定该物业只移动标题是另一个,但我还没找到它。顺便说一句,这是我的整个对象:
var columnChartProps = {
fontName: 'HelveticaNeueBC',
legend: {position: 'none'},
titleTextStyle: {fontSize: 18},
hAxis: {color: '#121b2d'},
vAxis: {
gridlines: {color: '#666666'}
},
width: 400,
height: 300,
backgroundColor: '#CBCBCB',
chartArea:{top:80, width:"80%"}
}
// VENCIMIENTOS:
var vencData = google.visualization.arrayToDataTable([
['equis', 'Vencimientos'],
['ENE', 7],
['FEB', 10],
['MAR', 5],
['ABR', 6],
['MAY', 10],
['JUN', 15]
]);
var vencOptions = {
colors:['#24375e','#2c4370','#324a7c','#38538a','#3e5b96','#4363a3'],
title: 'Vencimientos prox. 6 meses',
hAxis: {title: 'Meses'}
};
var vencimientos = new google.visualization.ColumnChart(document.getElementById('vencimientos'));
vencimientos.draw(vencData, jQuery.extend({},vencOptions,columnChartProps));
提前致谢:)
答案 0 :(得分:17)
我认为你不能通过vis api中的选项来做到这一点。
然而....
标题保存在使用x / y定位
的文本元素中如果您使用的是JQuery,这将变得轻而易举
$("text:contains(" + vencOptions.title + ")").attr({'x':'60', 'y':'20'})
在.draw调用之后立即添加,并调整x和y坐标,为您提供像素完美控制。
你可以在没有JQuery的情况下做到这一点,但时间紧迫,我会把它留给其他人:)
答案 1 :(得分:3)
<table>
<thead>
<th>Vencimientos prox. 6 meses</th>
</thead>
<tbody>
<td>
***YOUR CHART HERE***
</td>
</tbody>
</table>
现在,您可以根据需要随意使用风格和位置!
答案 2 :(得分:0)
当Google确实提供了标题位置时很烦恼,但是使用jQuery,你可以做到这一点
$("#YOUR_GRAPH_WRAPPER svg text").first()
.attr("x", (($("#time-series-graph svg").width() - $("#YOUR_GRAPH_WRAPPER svg text").first().width()) / 2).toFixed(0));
基本上,您希望访问第一个文本标记,即您的图表标题并更改x属性的值。为了使它居中,取svg宽度(你的图形宽度)减去标题widtch,然后除以2 :) 快乐的黑客行为:)