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

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

＆＃13;

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

＆＃13;

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

＆＃13;

注意：google.charts.Bar被视为材料图表，
材料
不支持列角色，例如'style'和'annotation' 以及几个配置选项，请参阅 - ＆gt; Tracking Issue for Material Chart Feature Parity

但是，材料是唯一支持top-x轴

的类型

如何在Google图表

1 个答案: