5

我被分配去实现一些图表，老板要求我把图表的标题和图表分开，我试着把图表的区域从顶部移动一点，但标题也随着图表移动，像这样：

在图表区域之前 在图表区域之后

我尝试使用：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));

提前致谢 ：）

4

3 回答 3

19

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

然而....

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

如果您使用的是 JQuery，这将成为小菜一碟

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

在 .draw 调用之后立即添加它并调整 x 和 y 坐标可为您提供像素完美的控制。

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

于 2013-04-30T02:21:23.600 回答
3

正如 PerryW 所说，我认为你不能用给定的 API 做到这一点。最简单的方法是制作一个带有第二行图表的 html 表格。

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

现在，您可以随心所欲地玩弄风格和位置！

于 2015-09-08T21:31:06.973 回答
0

当谷歌确实提供了标题位置但使用 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-21T22:04:05.613 回答