谷歌条形图将 x 轴标签移动到顶部答案

【问题标题】：Google Bar Chart Moving x-axis labels to Top谷歌条形图将 x 轴标签移动到顶部
【发布时间】：2016-08-11 13:47:13
【问题描述】：

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

谢谢，

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

Code Screenshot

【问题讨论】：

标签： javascript jquery html google-visualization bar-chart

【解决方案1】：

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

材料条形图
google.charts.Bar

对比核心条形图
google.visualization.BarChart

请参阅以下工作 sn-p...

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();
});

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

【讨论】：

感谢您的宝贵时间。它工作正常，但注释似乎没有出现在图表中？我们如何为材料条形图添加注释？
有几个选项，包括注释，根本不适用于Material图表

【解决方案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/

【讨论】：

您应该在修改图表之前等待'ready' event -- 数据更多/绘制时间更长的图表，否则可能会导致错误...
@WhiteHat 你是对的，但是在异步ajax调用的情况下会发生这种情况，这里chart.draw(data, options)使用同步调用首先完成这个请求，然后去其他代码。
它不会影响结果:)