更改字幕颜色谷歌图表

如何更改颜色和字体副标题谷歌图表？已经在论坛上有足够的研究，我读了所有关于它的文档，但没有成功。更改字幕颜色谷歌图表

是我的代码：

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)); 
}

来源

2016-08-12 Eduardo Dallmann

这个问题将得到更好的要求，并在[Web应用程序]回答（http://webapps.stackexchange.com/）。 – Jacob

因为没有配置选项，样式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>

来源

2016-08-13 17:42:00 WhiteHat

谢谢你whitehat，完美的作品 –

更改字幕颜色谷歌图表

回答

相关问题