Centre D'Aligner Le Titre Google Chart
Comment puis-je centrer le titre dans un graphique de ligne à partir de L'API Google Charts (pas des Images de Google Chart)
je ne vois pas d'options comme titlePosition: 'center'
Merci!
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['xValues', 'yValues'],
[0, 34.92],
[389, 39.44],
[488, 52.11],
[652, 55.4]
]);
var options = {
curveType: 'none', // 'function'
title: 'Title',
titleTextStyle: {
color: '333333',
fontName: 'Arial',
fontSize: 10
},
legend: 'none',
enableInteractivity: false
};
var chart = new google.visualization.LineChart(document.getElementById('visualization'));
chart.draw(data, options);
}
9 réponses
Cette option n'est pas fournie par L'API; vous ne peut tout simplement pas faire cela.
j'utilise: titlePosition: 'none'
Et insérer un titre avec la normale HTML
une Autre réponse suggère quelque chose comme ceci:
$("text:contains(" + vencOptions.title + ")").attr({'x':'60', 'y':'20'})
après avoir dessiné le graphique, appelez la fonction du gestionnaire d'événements:
google.visualization.events.addListener(chart, 'ready', Title_center);
Et définir la fonction:
function Title_center(){
var title_chart=$("#payer_chart_div svg g").find('text').html();
$("#payer_chart_div svg").find('g:first').html('<text text-anchor="start" x="500" y="141" font-family="Arial" font-size="18" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">'+title_chart+'</text>');
}
il suffit d'insérer le titre de votre tableau et ajouter les attributs X:500,y:141.
Vous pouvez facilement faire cela avec les informations de rappel du graphique après qu'il a été dessiné et un peu de mathématiques travaillant sur un certain texte dans un div.
Contenir votre carte dans un position:relative div. Ajoutez un div sous le graphique et positionnez-le ainsi que l'absolu du graphique.
alors vous pouvez déplacer les positions de la div en haut et à gauche avec un peu de maths de lycée.
<https://jsfiddle.net/o6zmbLvk/2/>
$("#YOUR_GRAPH_WRAPPER svg text").first()
.attr("x", (($("#time-series-graph svg").width() - $("#YOUR_GRAPH_WRAPPER svg text").first().width()) / 2).toFixed(0));
$("text:contains(" + vencOptions.title + ")").attr({'x':'60', 'y':'20'})
//
$("#YOUR_GRAPH_WRAPPER svg text").first().attr("x", (($("#time-series-graph svg").width() - parseInt($("#YOUR_GRAPH_WRAPPER svg text").first().attr('x'),10)) / 2).toFixed(0));
pour afficher le titre du diagramme au centre du diagramme, utilisez le code ci-dessous; il définira dynamiquement le titre au centre du conteneur du diagramme.
Ajouter ready écouteur d'événement; google.visualization.events.addListener(myChart, 'ready', titleCenter); et la fonction d'ajout titleCenter.
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawAxisTickColors);
var options = {
title: "Chart Title",
titleTextStyle: {
bold: true,
italic: true,
fontSize: 18,
},
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
};
function drawAxisTickColors() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
['2010', 10, 24, 20, 32, 18, 5, ''],
['2020', 16, 22, 23, 30, 16, 9, ''],
['2030', 28, 19, 29, 30, 12, 13, '']
]);
var myChart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
google.visualization.events.addListener(myChart, 'ready', titleCenter);
myChart.draw(data, options);
}
function titleCenter() {
var $container = $('#chart_div');
var svgWidth = $container.find('svg').width();
var $titleElem = $container.find("text:contains(" + options.title + ")");
var titleWidth = $titleElem.html().length * ($titleElem.attr('font-size')/2);
var xAxisAlign = (svgWidth - titleWidth)/2;
$titleElem.attr('x', xAxisAlign);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>document.getElementById ("divid").getElementsByTagName('texte')[0].setAttribute ('x','350')