简体   繁体   中英

How to style x-axis labels background color of google bar charts? [on hold]

I want to style x-axis label of a bar chart from google chart website, but i can't understand how to style the background color of labels because of these labels are put in text tag so i can change the color of fonts but can't background color.

Google Chart links: developers.google.com .

I want to style like this:

谷歌图表

    <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>

You can change the style in the js file as below:

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

Hope it helps you!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM