谷歌图表 - 更改轴文字颜色

我试图用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

谷歌图表 - 更改轴文字颜色

回答

相关问题