Question

如图所示：https://imgur.com/kDBu95D列有0个数据的列高于值为1和2的列。而y轴开始反向，0位于顶部而不是底部。这发生在我使用laravel雄辩的时候。

这是我的代码：

@extends('layouts.app')

@section('content')

  <div class="container">

    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['User', 'Added'],

          @if ($users)

            @foreach ($users as $user)

              ['{{$user->name}}', '{{$user->members->count()}}'],

            @endforeach

          @endif

        ]);

        var options = {
          chart: {
            title: 'Users',
          },
          vAxis: {
            format: 'decimal',
          },

        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>

    <div id="columnchart_material" style="width: 'auto'; height: 500px;"></div>

  </div>

@endsection

我试着添加这个：

vAxis: { minValue: 0 },

和此：

vAxis: { direction: -1, },

但没有任何帮助...

Answer 1

看起来y轴的值是字符串而不是数字......

从第二个数组值中删除单引号...

更改 - ＆gt; ['{{$user->name}}', '{{$user->members->count()}}'],

到 - ＆gt; ['{{$user->name}}', {{$user->members->count()}}],

Google柱形图y轴开始反转

1 个答案: