如何設置谷歌條形圖的x軸標簽背景顏色？ [等候接聽]

Question

我想設置來自谷歌圖表網站的條形圖的 x 軸 label 樣式，但我不明白如何設置標簽的背景顏色，因為這些標簽放在文本標簽中，所以我可以更改 fonts 的顏色，但可以不是背景顏色。

谷歌圖表鏈接： developers.google.com 。

我想要這樣的風格：

    <script type="text/javascript">
                google.charts.load("current", {packages:['corechart']});
                google.charts.setOnLoadCallback(drawChart);
                function drawChart() {
                    var data = google.visualization.arrayToDataTable([
                        ["Element", "Density", { role: "style" } ],
                        ["JAN", 285, "color: #000"],
                        ["FEB", 250, "color: #000"],
                        ["MAR", 280, "color: #000"],
                        ["APR", 91.22, "color: #000"],
                        ["MAY", 123.98, "color: #000"],
                        ["JUN", 82.34, "color: #000"],
                        ["JUL", '', "color: #000"],
                        ["AUG", '', "color: #000"],
                        ["SEP", '', "color: #000"],
                        ["OCT", '', "color: #000"],
                        ["NOV", '', "color: #000"],
                        ["DEC", '', "color: #000"],
                        ]);



                    var view = new google.visualization.DataView(data);
                    view.setColumns([0, 1,
                        { calc: "stringify",
                        sourceColumn: 1,
                        type: "string",
                        role: "annotation" },
                        2]);

                    var options = {
                        title: "",
                        width: 1280,
                        height: 400,
                        bar: {groupWidth: "95%"},
                        hAxis: {
                            textStyle: {
                                fontSize : 16,
                            },
                            backgroundColor: {
                                fill: 'pink'
                            },
                        },
                        legend: { position: "none" },
                        vAxis: { gridlines: { count: 0 } }
                    };

                    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
                    chart.draw(view, options);
                }
            </script>

Answer 1

您可以更改 js 文件中的樣式，如下所示：

var options = { 
   xAxis: {
     color: 'transparent',
     fontName: 'Russo One',
     bar: { groupWidth: "50%" },
     legend: { position: "none" },
     backgroundColor: { fill:'transparent' }
   }
}

希望對你有幫助！