问题描述
我正在使用Google Chart API创建饼图.
I am using Google chart api to create a pie chart.
我要在此处显示标题的两行.
What I want here is to display the title in two lines.
一个是实际标题,然后是小写的一些信息.
One is the actual title and below that some info in small text.
我该如何实现?
推荐答案
因此,只是试图让自己陷入API(猜测他们现在通过javascript执行此操作,并且弃用了图像图表-众所周知).反正...
So, just tried to get myself caught up on the API (guess they do this via javascript now and deprecated the image charts--good to know). Anyways...
饼图选项上有一个页面,但没有特定于每行的内容.您可以使用\n
分割线,但是您必须使用统一的样式(通过titleTextStyle
).
There's a page on Pie Chart options, but nothing specific to per-line. You can split lines using \n
, but you're stuck with a uniform styling (via titleTextStyle
).
但是,给定库输出的SVG,我们有完全的能力在生成DOM之后对其进行操作.当然,如果不支持SVG,我敢肯定Google会使用某种后备方式,但是如果我们可以对其进行修改,为什么不呢?
However, given the library outputs an SVG we have complete ability to manipulate the DOM after it's generated. Granted, I'm sure there's a fallback of some kind that google uses if SVG isn't supported, but if we can modify it, why not.
因此,由于证明在布丁中:
So, since the proof's in the pudding:
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate\nLast Night',
'titleTextStyle': {
'fontSize': '16'
},
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart_div = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(chart_div);
chart.draw(data, options);
var heading = chart_div.getElementsByTagName('g')[0];
if (heading){
var title = heading.getElementsByTagName('text')[1];
if (title){
title.setAttribute('font-size', '10');
}
}
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
这篇关于Google Chart API中的两行标题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!