Google Charts：饼图标题位置

我被分配执行一些图表，并且老板要求我将图表的标题从图表中分离出来，我尝试将图表的区域从顶部移开一点，但标题与图表太感动，是这样的：Google Charts：饼图标题位置

before chartArea after 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));

感谢提前:)

来源

2013-04-29 Ruffo

我不认为你可以通过在可见API选项做到这一点。

但是....

标题中使用X/Y定位

如果您正在使用JQuery，这将成为小菜一碟

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

的文本元素召开在.draw调用之后立即添加，并调整x和y坐标可以让您完美控制像素。

你可以不用JQuery的，但时间紧迫，我会留给别人:)

来源

2013-04-30 02:21:23 PerryW

我忘了...必须jsfiddle http://jsfiddle.net/kentcoast/KLWgW/ – PerryW 2013-04-30 07:06:07

伟大的解决方案 - 易于工作到一个形式;） – 2013-05-09 12:41:02

一个问题是，在我的情况下，图形的大小（和宽度）是响应。在这种情况下，X/Y定位可能会非常棘手，我宁愿通过在Google Charts之上使用我自己的标题进行操作。 – 2017-10-17 15:27:56

为PerryW说，我不认为你可以用给定的API做到这一点。做到这一点的最简单方法是在第二行用图表制作一个html表格。

<table> 
    <thead> 
     <th>Vencimientos prox. 6 meses</th> 
    </thead> 
    <tbody> 
     <td> 
      ***YOUR CHART HERE*** 
     </td> 
    </tbody> 
</table>

现在你可以使用样式和位置玩，只要你想尽可能多的！

来源

2015-09-08 21:31:06

这是恼火，当谷歌没有提供标题的位置，但与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 :) 快乐黑客:)

来源

2016-06-21 22:04:05 tkhuynh

Google Charts：饼图标题位置

回答

相关问题