更改字幕顏色谷歌圖表

Question

如何更改顏色和字體副標題谷歌圖表？ 已經在論壇上有足夠的研究，我讀了所有關於它的文檔，但沒有成功。

是我的代碼：

google.charts.load('current', { 
'packages': ['bar'] 
}); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
var data = google.visualization.arrayToDataTable([ 
    ['aqui em baixo', 'Ocupada', 'Disponível'], 
    ['eq1', 10, 24], 
    ['eq2', 16, 22], 
    ['eq3', 28, 19] 
]); 

var options = { 
    width: '100%', 
    height: 500, 
    isStacked: true, 
    series: [{ 
     color: '#5fb560' 
    }, { 
     color: '#db4437' 
    }], 
    legend: { 
     position: 'top', 
     maxLines: 1 
    }, 
    bar: { 
     groupWidth: '75%' 
    }, 
    chart: { 
     title: 'Company Performance', 
     subtitle: 'Sales, Expenses, and Profit: 2014-2017', 
    }, 
    titleTextStyle: { 
     color: '#333333' 
    }, 
}; 

var chart = new google.charts.Bar(document.getElementById('chart_div')); 

chart.draw(data, google.charts.Bar.convertOptions(options)); 
} 

Answer 1

因爲沒有配置選項，樣式chart.subtitle

必須直接改變SVG，當'ready'事件觸發

看到下面的工作片段。 ..

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['aqui em baixo', 'Ocupada', 'Disponível'], 
 
     ['eq1', 10, 24], 
 
     ['eq2', 16, 22], 
 
     ['eq3', 28, 19] 
 
    ]); 
 

 
    var options = { 
 
     width: '100%', 
 
     height: 500, 
 
     isStacked: true, 
 
     series: [{ 
 
      color: '#5fb560' 
 
     }, { 
 
      color: '#db4437' 
 
     }], 
 
     legend: { 
 
     position: 'top', 
 
     maxLines: 1 
 
     }, 
 
     bar: { 
 
     groupWidth: '75%' 
 
     }, 
 
     chart: { 
 
     title: 'Company Performance', 
 
     subtitle: 'Sales, Expenses, and Profit: 2014-2017', 
 
     }, 
 
     titleTextStyle: { 
 
     color: '#333333' 
 
     } 
 
    }; 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.charts.Bar(container); 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
     var labels = document.getElementsByTagName('text'); 
 
     for (var i = 0; i < labels.length; i++) { 
 
     if (labels[i].innerHTML === options.chart.subtitle) { 
 
      labels[i].style.fill = 'magenta'; 
 
      labels[i].style.fontFamily = 'Courier'; 
 
      break; 
 
     } 
 
     } 
 
    }); 
 

 
    chart.draw(data, google.charts.Bar.convertOptions(options)); 
 
    }, 
 
    packages: ['bar'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>