Google柱形图y轴开始反转

Question

如图所示：https://imgur.com/kDBu95D 数据为 0 的列高于值为 1 和 2 的列。并且 y 轴反向开始，0 在顶部而不是底部。当我使用 laravel eloquent.

时发生了这种情况

这是我的代码：

@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 轴的值是字符串而不是数字...

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

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

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

Google柱形图y轴开始反转

Google column chart y axis start reverse

charts

google-visualization

laravel

laravel-eloquent