谷歌圖表 - 更改軸文字顏色

我試圖用Google圖表創建黑色圖表，但似乎無法更改軸的文本顏色。我嘗試了一些我在網絡上找到的代碼片段，例如：谷歌圖表 - 更改軸文字顏色

hAxis: { 
    color: '#FFF' 
}

但它只是不起作用。我設法改變標題和圖例顏色，但不是軸文本。我試圖軸文本顏色設置爲白色，與研究背景對比：

google.load("visualization", "1", { packages: ["corechart"] }); 
 
setTimeout(function() { 
 
    var options = { 
 
    title: 'Test Chart', 
 
    backgroundColor: '#000', 
 
    legendTextStyle: { color: '#FFF' }, 
 
    titleTextStyle: { color: '#FFF' }, 
 
    hAxis: { 
 
     color: '#FFF', 
 
    } 
 
    }; 
 
    var chart = new google.visualization.LineChart(document.querySelector(".chart")); 
 
    chart.draw(google.visualization.arrayToDataTable(
 
    
 
    [ 
 
     ["Year", "T1", "T2", "T3"], 
 
     [0, 10, 20, 30], 
 
     [1, 10, 20, 30], 
 
     [2, 10, 20, 30], 
 
     [3, 10, 20, 30], 
 
     [4, 10, 20, 30] 
 
    ] 
 
    
 
), options); 
 
    
 
}, 100);

.chart { 
 
    width: 100%; 
 
    height: 200px; 
 
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<div class="chart"></div>

來源

2014-10-16 LcSalazar

我的用例有點不同：在常規圖表（未配置的顏色）的情況下，文本是灰色的而不是黑色的，所以它們的對比度很低。這意味着我必須手動指導和修改每件作品，才能真正成爲黑色作品？ – 2016-12-22 18:31:16

爲hAxis正確的用法是使用文本樣式選項，在其中您想要的顏色：

hAxis: { 
    textStyle:{color: '#FFF'} 
}

我也建議使用google.setOnLoadCallback(drawChart);函數渲染圖表，而不是暫停，至少對我來說100毫秒是不夠的

來源

2014-10-16 17:20:06 juvian

對！謝謝... – LcSalazar 2014-10-16 17:40:15

正是我一直在尋找！ – 2017-12-05 09:33:14

谷歌圖表 - 更改軸文字顏色

回答

相關問題