Google Charts:饼图标题位置

Ruf*_*ffo 5 javascript google-visualization

我被指派实施一些图表,并且老板要求我将图表的标题与图表分开,我试图将图表的区域从顶部稍微移开,但标题也随图表一起移动,如下所示:

在chartArea之前 在chartArea之后

我尝试使用: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));
Run Code Online (Sandbox Code Playgroud)

提前致谢 :)

Per*_*ryW 17

我不认为你可以通过vis api中的选项来做到这一点.

然而....

标题保存在使用x/y定位的文本元素中

如果您使用的是JQuery,这将变得轻而易举

$("text:contains(" + vencOptions.title + ")").attr({'x':'60', 'y':'20'})
Run Code Online (Sandbox Code Playgroud)

在.draw调用之后立即添加,并调整x和y坐标,可以实现像素完美控制.

你可以在没有JQuery的情况下做到这一点,但时间紧迫,我会把它留给别人:)

  • 我忘记了...强制性的jsfiddle http://jsfiddle.net/kentcoast/KLWgW/ (2认同)