如何在饼图的标题中应用背景颜色

时间:2014-02-11 12:13:06

标签: javascript google-visualization pie-chart

如何在饼图标题中应用背景颜色。此外,背景颜色应该应用于标题的总面积。以下是我使用的代码..

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="donut-1" style="width: 450px; height: 300px; float:left;">
</div>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['', 111],
['4081.00', 252],
['724.00', 122],
['', 122],
['', 111],
['436.00', 111],
['1343.00', 111],
['', 111],
['', 111],
['270.00', 111]
]);
var options = {
backgroundColor: '#FFF',
pieHole: 0.5,
legend: 'none',
chartArea: { backgroundColor: { 'fill': '#F0F8FC', 'opacity': 100 }, left: 20, top: 30,  width:"90%",height:"85%" },              
 pieSliceText: 'label',
 title: "Total Chargeable Weight", titleTextStyle: { color: '#007DB0', fontSize: '16'}            
 };    
 var chart = new google.visualization.PieChart(document.getElementById('donut-1'));
 chart.draw(data, options);
 }
 </script>

1 个答案:

答案 0 :(得分:0)

您可以指定要为图表显示的文字标题的颜色,但不能为文字指定 背景填充颜色 (如果这就是您要的那样)寻找)

titleTextStyle 配置选项(作为对象),允许您指定以下属性

{ 
  color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> 
}