Google Graphiques: Graphique en secteurs titre

J'ai été chargé de mettre en œuvre certaines Cartes, et le boss m'a demandé de séparer le titre du graphique de la carte, j'ai essayé de déplacer le graphique de la zone un peu de haut, mais le titre déplacé avec le diagramme de trop, comme ceci:

Google Graphiques: Graphique en secteurs titre

J'ai essayé d'utiliser: chartArea:{top:80} et le résultat a été que, sur la capture d'écran. Je suis sûr que la propriété de se déplacer uniquement le titre, c'est un autre mais je ne peux pas trouver encore. btw, C'est mon ensemble de l'Objet:

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

Merci d'avance 🙂

InformationsquelleAutor Ruffo | 2013-04-29
  1. 17

    Je ne pense pas que vous pouvez le faire via les options de la vis de l'api.

    Cependant....

    Le titre est détenu dans un élément de texte qui utilise x/y de positionnement

    Si vous utilisez JQuery, cela devient un morceau de gâteau

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

    Ajoutant que, immédiatement après l' .appel de et de peaufiner le x et le y coords vous donne des pixels-contrôle parfait.

    Vous pouvez le faire sans JQuery, mais le temps presse et je vais laisser ça à quelqu'un d'autre 🙂

    • Un problème est que dans mon cas, la taille (et la largeur) du graphe est sensible. Dans ce cas, un x/y de positionnement peut être difficile et je préfère aller à l'aide de mon propre titre au-dessus de la Google Charts.
    InformationsquelleAutor PerryW
  2. 3

    comme PerryW dit, je ne pense pas que vous pouvez faire cela avec la donnée de l'API. La meilleure façon de le faire serait de faire un tableau html avec le diagramme sur la deuxième ligne.

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

    Maintenant, vous pouvez jouer avec le style et l'emplacement autant que vous le souhaitez!

    InformationsquelleAutor Danny Harding
  3. 0

    Il est gêné quand Google n'a fournir des titres de position, mais avec jQuery, vous pouvez le faire

    $("#YOUR_GRAPH_WRAPPER svg text").first()
 .attr("x", (($("#time-series-graph svg").width() - $("#YOUR_GRAPH_WRAPPER svg text").first().width()) / 2).toFixed(0));

    Fondamentalement, vous souhaitez accéder à la première balise de texte qui est votre titre du graphique et changer la valeur de l'attribut x. Au centre, il faut prendre la svg largeur (votre largeur du graphique) soustraire par titre widtch, puis divisez-le par 2 🙂
    Heureux de piratage 🙂

    InformationsquelleAutor tkhuynh