如何在谷歌圖表中旋轉柱狀圖

Question

我需要圖從第一行開始，然后到底部。 但事實證明，他是自下而上的。 怎么做？ 這是javascript文件。 我使用谷歌圖表。

google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
            ['First name','Data:',{role: 'style'}],
            ["D426 10,0мм",11,'color:black'],
            ["D323,9 9,5мм",60,'color:black'],
            ["D244,5 11,1мм",248,'color:black'],
            ["D168,3 8,9мм",725,'color:black'],
            ["D168,4 8,9мм",124,'color:black'],
            ["D168,5 8,9мм",643,'color:black'],
            ["D168,6 8,9мм",12,'color:black'],
            ["D168,7 8,9мм",355,'color:black'],
        ]);

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

        var options = {
            colors:'black',
            label:'Project name',
            chartArea:{width:'100%',height:'100%'},
            legend: { position: 'none' },          
            axes: {x: {0: { side: 'top', label: ''}},},
            bar: { groupWidth: "10%", },
            orientation:'',
            vAxis:{gridlines:{count:"0"},
                baselinecolor:'black',
                logScale:true,
                position:'none'},
           };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(view, google.charts.Bar.convertOptions(options));
      };

Answer 1

沒有任何可用於切換條形方向的標准配置選項
唯一的辦法就是使用負值
然后使用對象符號來更改格式值，
因此它們在工具提示中仍然顯示為肯定

{v: -11, f: '11'}

請參閱以下工作片段...

 google.charts.load('current', { packages: ['bar'] }).then(function () { var data = new google.visualization.arrayToDataTable([ ['First name', 'Data:'], ["D426 10,0мм", {v: -11, f: '11'}], ["D323,9 9,5мм", {v: -60, f: '60'}], ["D244,5 11,1мм", {v: -248, f: '248'}], ["D168,3 8,9мм", {v: -725, f: '725'}], ["D168,4 8,9мм", {v: -124, f: '124'}], ["D168,5 8,9мм", {v: -643, f: '643'}], ["D168,6 8,9мм", {v: -12, f: '12'}], ["D168,7 8,9мм", {v: -355, f: '355'}], ]); var options = { colors: 'black', legend: {position: 'none'}, axes: {x: {0: { side: 'top', label: 'Project name'}}}, bar: {groupWidth: '10%'}, vAxis:{ textStyle: {color: 'transparent'}, gridlines: {count: '0'} }, }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="top_x_div"></div> 

注意 ： google.charts.Bar被視為實質圖表，
材質不支持列角色，例如'style'和'annotation'
以及幾個配置選項，請參見-> 物料圖特征奇偶校驗的跟蹤問題

但是， 材質是唯一支持top-x軸的類型