Javascript 居中对齐标题谷歌图表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11266286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center Align Title Google Chart
提问by Turnercj65
How can I center the title in a Line Chart from Google Charts API (Not Google Chart Images)
如何在 Google Charts API（不是 Google Chart Images）的折线图中居中标题
I don't see any options like titlePosition: 'center'
我没有看到像 titlePosition: 'center' 这样的任何选项
Thanks!
谢谢！
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);
}
?
?
回答by Lightness Races in Orbit
回答by Werner
I use: titlePosition: 'none'
我使用：titlePosition：'无'
And insert a title with normal HTML
并插入带有普通 HTML 的标题
回答by Matt Mitchell
Another answersuggests something like the following:
另一个答案建议如下：
$("text:contains(" + vencOptions.title + ")").attr({'x':'60', 'y':'20'})
回答by Anuja Saravanan
After drawing the chart, call the event handler function:
绘制图表后，调用事件处理函数：
google.visualization.events.addListener(chart, 'ready', Title_center);
And define the function as:
并将函数定义为：
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>');
}
Just insert the title of your chart and add the attributes X:500,y:141.
只需插入图表的标题并添加属性X:500, y:141。
回答by Ray Myers
You can easily do this with the callback info from the chart after it has been drawn and a bit of math working on some text in a div.
在绘制图表后，您可以使用图表中的回调信息轻松完成此操作，并在 div 中的某些文本上进行一些数学运算。
Contain your chart in a position:relative div. Add a div under the chart and position both it and the chart absolute.
在 position:relative div 中包含您的图表。在图表下添加一个 div 并将其和图表绝对定位。
Then you can move the div's top & left positions with a little high-school math.
然后你可以用一点高中数学来移动 div 的顶部和左侧位置。
<https://jsfiddle.net/o6zmbLvk/2/>
回答by tkhuynh
$("#YOUR_GRAPH_WRAPPER svg text").first()
.attr("x", (($("#time-series-graph svg").width() - $("#YOUR_GRAPH_WRAPPER svg text").first().width()) / 2).toFixed(0));
回答by ravi chandra
$("text:contains(" + vencOptions.title + ")").attr({'x':'60', 'y':'20'})
//OR
//或者
$("#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));
回答by Divyesh Prajapati
To show chart title in center of chart use below code snippet; it will dynamically set title in center of chart container.
要在图表中心显示图表标题，请使用以下代码片段；它将在图表容器的中心动态设置标题。
Add readyevent listener; google.visualization.events.addListener(myChart, 'ready', titleCenter);and add function titleCenter.
添加ready事件监听器；google.visualization.events.addListener(myChart, 'ready', titleCenter);并添加功能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>回答by Gopal Singh
function Title_center(total) {
var title_chart = $("#chart svg g").find('text').html();
var x = $("#chart svg g").find('rect').attr('width');
var y = $("#chart svg g").find('rect').attr('y');
alert(x);
$("#chart svg").find('g:first')
.html('<text text-anchor="start" x="'+x/2+'" y="'+y+'" font-family="Arial" font-size="12" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">' + total + '</text>');
}
Create this fuction in script, and call after chart draw like:
在脚本中创建此功能，并在图表绘制后调用，如：
google.visualization.events.addListener(chart, 'ready', Title_center("Test success"));
回答by César León
As previous answer said, you can′t config a centered title. Just don′t set any "title" config. By defult it will not be displayed.
正如之前的答案所说，您不能配置居中的标题。只是不要设置任何“标题”配置。默认情况下不会显示。
Then you can set a title with HTML, some code:
然后你可以用HTML设置一个标题，一些代码：
<div>
<div style="text-align: center;">Some Centered Title</div>
<div id="chart_container">
<!-- THE CHART GOES HERE -->
</div>
</div>
