google 图表 api 中的两行标题

Question

我正在使用 Google 图表 api 创建饼图。

这里我想要的是两行显示标题。

一个是实际标题，下面是一些小文本信息。

我怎样才能做到这一点？

Answer 1

所以，我试着让自己了解 API（我猜他们现在是通过 javascript 这样做的，并且弃用了图像图表——很高兴知道）。无论如何...

Pie Chart options 上有一个页面，但没有特定于每行的内容。您可以使用 \n 分割线，但您仍然坚持使用统一的样式（通过 titleTextStyle）。

但是，鉴于库输出 SVG，我们完全有能力在生成后操作 DOM。当然，如果不支持 SVG，我确定 google 会使用某种回退，但如果我们可以修改它，为什么不呢。

所以，既然证明在布丁中：

// 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 图表 api 中的两行标题

Two line title in google chart api

html

charts

pie-chart