Google Charts：饼图标题位置 [英] Google Charts: Pie Chart title position

问题描述

我被分配执行一些图表，并且老板要求我将图表的标题从图表中分离出来，我尝试将图表的区域从顶部移开一点，但标题也随图表一起移动，就像这：

我尝试过使用： chartArea： {top：80} ，结果就是截图。我敢肯定，财产只移动标题是另一个，但我还找不到它。 btw，这是我的整个对象：

  var columnChartProps = {
 fontName：'HelveticaNeueBC'，
图例：{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））; 
  

提前致谢：

解决方案

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

然而.. ..

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

如果您正在使用JQuery，这成为一块蛋糕

  $（text：contains（+ vencOptions.title +））。 attr（{'x'：'60'，'y'：'20'}）
  

添加紧接在.draw调用之后，调整x和y坐标让你完美控制像素。

你可以在没有JQuery的情况下做到，但时间紧迫，我会把它留给其他人:)

I was assigned to implement some Charts, and the bosses requested me to separate the title of the chart from the Chart, I tried to move the chart's area a little from the top, but the title moved with the chart too, like this:

I tried using: chartArea:{top:80} and the result was that, on the screenshot. I'm sure the property to move only the title it's another but I can't find it yet. btw, This is my whole Object:

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));

Thanks in advance :)

解决方案

I don't think you can do this through options in the vis api.

However....

The title is held in a text element that uses x/y positioning

If you are using JQuery, this becomes a piece of cake

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

Adding that immediately after the .draw call and tweaking the x and y coords gives you pixel-perfect control.

You can do it without JQuery, but time is pressing and I'll leave that to someone else :)

这篇关于Google Charts：饼图标题位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！