Question

Google柱形图绘制Y轴值混合如下图所示。我希望Y值应该在普通时增加。

Jquery的

var result_glb;
$.post(base_url+"dashboard/get_bar_chart_data",function(result){
  result_glb = $.parseJSON(result);
}).done(function(){
  google.charts.load('current', {'packages':['corechart','bar']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable(result_glb);

    var options = {
      vAxis : { format: 'decimal' },
      legend: {position: 'none'},
      colors: ['#08A3CC', '#89C4F4', '#02617A','#42617A']

    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
    chart.draw(data, options);
    //chart.draw(data, google.charts.Bar.convertOptions(options)); has been tried.
  }
});

请求结果

我的结果不是普通的增加，但是柱形图使它们像日复一日地增加，并且在那之后每个条形的Y值。图表是否有任何选项可以解决这个问题？

Answer 1

您可以手动重新排序每列的值

for (var r = 0; r < data.getNumberOfRows(); r++) {
  var colValues = [];
  for (var c = 1; c < data.getNumberOfColumns(); c++) {
    colValues.push(data.getValue(r, c));
  }
  colValues.sort(function (a, b) {
    return a - b;
  });
  for (var c = 1; c < data.getNumberOfColumns(); c++) {
    data.setValue(r, c, colValues[c - 1])
  }
}

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

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages: ['bar']
});

function drawChart() {
  //var data = google.visualization.arrayToDataTable(result_glb);

  var data = google.visualization.arrayToDataTable([
    ['Date', 'A', 'B', 'C', 'D', 'E', 'F'],
    ['2017-06-01', 165, 938, 522, 998, 450, 250],
    ['2017-06-02', 135, 1120, 599, 1268, 288, 250],
    ['2017-06-03', 157, 1167, 587, 807, 397, 250],
    ['2017-06-04', 139, 1110, 615, 968, 215, 250],
    ['2017-06-05', 136, 691, 629, 1026, 366, 250]
  ]);

  for (var r = 0; r < data.getNumberOfRows(); r++) {
    var colValues = [];
    for (var c = 1; c < data.getNumberOfColumns(); c++) {
      colValues.push(data.getValue(r, c));
    }
    colValues.sort(function (a, b) {
      return a - b;
    });
    for (var c = 1; c < data.getNumberOfColumns(); c++) {
      data.setValue(r, c, colValues[c - 1])
    }
  }

  var options = {
    legend: {position: 'none'},
    colors: ['#08A3CC', '#89C4F4', '#02617A','#42617A']
  };

  var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
  chart.draw(data, options);
}

＆＃13;

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

＆＃13;

但是，重新排序列值将删除与列标题的任何关系。

表示最初在A列中的值，现在可能在F列中......

Answer 2

当数字作为文本添加到json数据中时，y轴将无法正确排序。添加到php数组时，请确保将数字转换为数字类型。 php例子：

   $out[$outlineindex][$outdbcolindex] = (float)$val['MyNumber'];

这不会解决您的条形排序问题，但会解决您的y轴的问题，该问题在您的图形示例中是混乱的。

Google柱形图绘制Y轴值混合

2 个答案: