Question

我正在使用谷歌条形图，我想将x轴标签移到顶部。我已经编写了代码，但它没有发生。请检查小提琴和屏幕截图。有什么建议？

谢谢，

`https://jsfiddle.net/n5paq0r9/`

Code Screenshot

Answer 1

Top-X charts仅适用于材料图表

材料条形图
google.charts.Bar

VS。核心条形图
google.visualization.BarChart

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {packages: ['bar']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

var data = google.visualization.arrayToDataTable([
         ['App Name', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['My Test App Name Appears Here', 6.94, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 10.49, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 19.30, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 24, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 5.30, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 2.30, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 21.45, 'blue', 'My Test App Name Appears Here' ]
      ]);

var options = { 
          chartArea: {width: '90%'},
          height: 500,
          legend: { position: 'none' },
          vAxis:{textStyle:{color: '#005500',fontSize: '12', paddingRight: '100',marginRight: '100'}},
          hAxis:{textStyle:{color: '#005500',fontSize: '11', paddingRight: '100',marginRight: '100'}},
          bars: 'horizontal',
          axes: {             
            x: { 
              0: { side: 'top'} 
            }                     
          }     
        };

      var chart = new google.charts.Bar(document.getElementById('chart_div'));

      chart.draw(data, google.charts.Bar.convertOptions(options));
    }
    
    
$(window).resize(function(){
  drawBasic();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

Answer 2

。。。。之后

chart.draw(data, options);

添加此代码

var height = options.height;
            var array = $("#chart_div svg g").children()[3].children;
            for (var i = 0; i < array.length; i++) {

                $("text").removeClass("currentNode");
                array[i].children[0].setAttribute("class", "currentNode");
                var y = height - parseFloat($(".currentNode").attr("y"));
                $(".currentNode").attr("y", y);
            }

https://jsfiddle.net/n5paq0r9/3/

Google条形图将x轴标签移至顶部

2 个答案: