Google Charts: позиция заголовка круговой диаграммы

Мне было поручено реализовать некоторые Графики, и боссы попросили меня отделить заголовок графика от Диаграммы, я попытался немного сместить область диаграммы с вершины, но заголовок тоже переместился вместе с диаграммой, например так:

Я пытался с помощью: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));

Заранее спасибо :)

Ответы на вопрос(3)

я не думаю, что вы можете сделать это с данным API. Самый простой способ сделать это - создать HTML-таблицу с диаграммой во второй строке.

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

Теперь вы можете поиграть со стилем и расположением столько, сколько захотите!

Решение Вопроса

Тем не мение....

Заголовок содержится в текстовом элементе, который использует позиционирование по оси x / y.

Если вы используете JQuery, это становится просто

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

Добавление этого сразу после вызова .draw и настройка координат x и y дает идеальный контроль пикселей.

Вы можете сделать это без JQuery, но время идет, и я оставлю это кому-то еще :)

 PerryW30 апр. 2013 г., 09:06
Я забыл ... Обязательный jsfiddlejsfiddle.net/kentcoast/KLWgW
 Csaba Toth17 окт. 2017 г., 17:27
Одна из проблем заключается в том, что в моем случае размер (и ширина) графика является чувствительным. В этом случае позиционирование по x / y может быть сложным, и я бы предпочел использовать свой собственный заголовок над Google Charts.

когда 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 width (ширину вашего графика), вычтите его из виджета title, затем разделите на 2 :) Счастливого взлома :)

Ваш ответ на вопрос