jquery - 谷歌柱形图中的Y轴值以相反顺序显示

Question

Google 柱形图中的 Y 轴值以相反顺序显示。请看一下我得到的结果。

我的代码是:

HTML

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<div class="col-sm-6" id="job_chart" style="width: 800px; height: 500px;"></div> 

jquery

$.post("/emp_action_ajax.html",{'ajaxOp':'loadJobChart'},function(data){
    var data_array = $.parseJSON(data);
    var dataarray = [["Date", "Job"]];
        for (var i = 0; i < data_array.length; i++) {
            var sub = [data_array[i].date, data_array[i].jcount];
            dataarray.push(sub);
        }
     drawStuff(dataarray);
    });

    google.load("visualization", "1.1", {packages: ['corechart', 'bar']});
      function drawStuff(dataArray) {
      var data = new google.visualization.arrayToDataTable(dataArray);

        var options = {
          width: 400,
          legend: { position: 'none' },
          chart: {
            title: 'Year and month wise job count',
            subtitle: '' },
          axes: {
            x: {
                0: { side: 'bottom', label: 'Month-Year'} // Bottom x-axis.
            },
            /*y: {
                0: { side: 'bottom', label: 'Job', direction: '-1'}
            }*/
          },
          /*vAxis: {
              title: 'Job',
              direction: '1'
            },*/
          bar: { groupWidth: "50%" }
        };

        var chart = new google.charts.Bar(document.getElementById('job_chart'));
      chart.draw(data, google.charts.Bar.convertOptions(options));
      };

我尝试过的

y: {
0: { side: 'bottom', label: 'Job', direction: '-1'}
 }

并且

vAxis: {
                  title: 'Job',
                  direction: '1' //-1
                }

UPADTE

我提醒 drawStuff(dataArray) 函数内的 dataArray 并获取

Answer 1

这是因为您的 data_array[i].jcount 值被视为字符串，以使其可以使用 parseInt() 像

for (var i = 0; i < data_array.length; i++) {
     var sub = [data_array[i].date, parseInt(data_array[i].jcount)];
     dataarray.push(sub);
}

非工作片段，

var dataArray = [
  ["Date", "Job"],
  ['2017-1', '5'],
  ['2017-4', '2']
];
google.load("visualization", "1.1", {
  packages: ['corechart', 'bar']
});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
  var data = new google.visualization.arrayToDataTable(dataArray);

  var options = {
    width: 400,
    legend: {
      position: 'none'
    },
    chart: {
      title: 'Year and month wise job count',
      subtitle: ''
    },
    axes: {
      x: {
        0: {
          side: 'bottom',
          label: 'Month-Year'
        } // Bottom x-axis.
      }
    },
    vAxis: {
      title: 'Job',
      direction: '-1'
    },
    bar: {
      groupWidth: "50%"
    }
  };

  var chart = new google.charts.Bar(document.getElementById('job_chart'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
};

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<div class="col-sm-6" id="job_chart" style="width: 800px; height: 500px;"></div>

工作片段，

var dataArray = [
  ["Date", "Job"],
  ['2017-1', 5],
  ['2017-4', 2]
];
google.load("visualization", "1.1", {
  packages: ['corechart', 'bar']
});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
  var data = new google.visualization.arrayToDataTable(dataArray);

  var options = {
    width: 400,
    legend: {
      position: 'none'
    },
    chart: {
      title: 'Year and month wise job count',
      subtitle: ''
    },
    axes: {
      x: {
        0: {
          side: 'bottom',
          label: 'Month-Year'
        } // Bottom x-axis.
      }
    },
    vAxis: {
      title: 'Job',
      direction: '-1'
    },
    bar: {
      groupWidth: "50%"
    }
  };

  var chart = new google.charts.Bar(document.getElementById('job_chart'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
};

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<div class="col-sm-6" id="job_chart" style="width: 800px; height: 500px;"></div>