javascript - 对谷歌条形图进行排序

Question

我没有什么问题。我希望这足以描述我的问题。这是代码

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawStuff);                       
  function drawStuff() {
    var data = google.visualization.arrayToDataTable([
      ['Operacije', 'Ponudjeno vreme', 'Utroseno vreme'],
      ['CNC Glodanje', cnc_glodanje, a_cnc_glodanje],
      ['Erodiranje', cnc_erodiranje, b_cnc_erodiranje],
      ['Erodiranje zicom', cnc_erodiranje_zicom, c_cnc_erodiranje_zicom],
      ['Ravno brusenje', ravno_brusenje, d_ravno_brusenje],
      ['Struganje', struganje, e_struganje],
      ['Okruglo brusenje', okruglo_brusenje, f_okruglo_brusenje],
      ['CNC struganje', cnc_struganje, g_cnc_struganje],
      ['Bravarski radovi', bravarski_radovi, j_bravarski_radovi]

    ]);
    var options = {
      chart: {
        title: 'Utroseno vreme',
        subtitle: 'Ponudjeno i utroseno vreme',   
      },    
      bars: 'horizontal' // Required for Material Bar Charts.
    };
    var chart = new google.charts.Bar(document.getElementById('barchart_material'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  }
</script>

/image/5BeHP.png

如何将横轴上的值从低值到高值排序？谢谢。

Answer 1

图像中揭示的问题是加载数据表时使用'string'值的结果...

请参阅以下工作片段，该图表与发布的图像类似...

google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawStuff);
  function drawStuff() {
    var cnc_glodanje = '3';
    var a_cnc_glodanje = '2';
    var cnc_erodiranje = '4';
    var b_cnc_erodiranje = '';
    var cnc_erodiranje_zicom = '12';
    var c_cnc_erodiranje_zicom = '';
    var ravno_brusenje = '3';
    var d_ravno_brusenje = '6';
    var struganje = '4';
    var e_struganje = null;
    var okruglo_brusenje = '8';
    var f_okruglo_brusenje = '4';
    var cnc_struganje = '4';
    var g_cnc_struganje = '5';
    var bravarski_radovi = '3';
    var j_bravarski_radovi = '3';

    var data = google.visualization.arrayToDataTable([
      ['Operacije', 'Ponudjeno vreme', 'Utroseno vreme'],
      ['CNC Glodanje', cnc_glodanje, a_cnc_glodanje],
      ['Erodiranje', cnc_erodiranje, b_cnc_erodiranje],
      ['Erodiranje zicom', cnc_erodiranje_zicom, c_cnc_erodiranje_zicom],
      ['Ravno brusenje', ravno_brusenje, d_ravno_brusenje],
      ['Struganje', struganje, e_struganje],
      ['Okruglo brusenje', okruglo_brusenje, f_okruglo_brusenje],
      ['CNC struganje', cnc_struganje, g_cnc_struganje],
      ['Bravarski radovi', bravarski_radovi, j_bravarski_radovi]
    ]);
    var options = {
      chart: {
        title: 'Utroseno vreme',
        subtitle: 'Ponudjeno i utroseno vreme',
      },
      bars: 'horizontal',
      height: 400
    };
    var chart = new google.charts.Bar(document.getElementById('barchart_material'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
    $(window).resize(function() {
      chart.draw(data, google.charts.Bar.convertOptions(options));
    });
  }

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

<小时/>

您需要使用parseFloat或parseInt，具体取决于数据中的数字类型

将字符串解析为数字可以纠正水平轴上的值的问题

请参阅以下工作片段，parseFloat 已添加到 arrayToDataTable...

  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawStuff);
  function drawStuff() {
    var cnc_glodanje = '3';
    var a_cnc_glodanje = '2';
    var cnc_erodiranje = '4';
    var b_cnc_erodiranje = '';
    var cnc_erodiranje_zicom = '12';
    var c_cnc_erodiranje_zicom = '';
    var ravno_brusenje = '3';
    var d_ravno_brusenje = '6';
    var struganje = '4';
    var e_struganje = null;
    var okruglo_brusenje = '8';
    var f_okruglo_brusenje = '4';
    var cnc_struganje = '4';
    var g_cnc_struganje = '5';
    var bravarski_radovi = '3';
    var j_bravarski_radovi = '3';

    var data = google.visualization.arrayToDataTable([
      ['Operacije', 'Ponudjeno vreme', 'Utroseno vreme'],
      ['CNC Glodanje', parseFloat(cnc_glodanje), parseFloat(a_cnc_glodanje)],
      ['Erodiranje', parseFloat(cnc_erodiranje), parseFloat(b_cnc_erodiranje)],
      ['Erodiranje zicom', parseFloat(cnc_erodiranje_zicom), parseFloat(c_cnc_erodiranje_zicom)],
      ['Ravno brusenje', parseFloat(ravno_brusenje), parseFloat(d_ravno_brusenje)],
      ['Struganje', parseFloat(struganje), parseFloat(e_struganje)],
      ['Okruglo brusenje', parseFloat(okruglo_brusenje), parseFloat(f_okruglo_brusenje)],
      ['CNC struganje', parseFloat(cnc_struganje), parseFloat(g_cnc_struganje)],
      ['Bravarski radovi', parseFloat(bravarski_radovi), parseFloat(j_bravarski_radovi)]
    ]);
    var options = {
      chart: {
        title: 'Utroseno vreme',
        subtitle: 'Ponudjeno i utroseno vreme',
      },
      bars: 'horizontal'
    };
    var chart = new google.charts.Bar(document.getElementById('barchart_material'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
    $(window).resize(function() {
      chart.draw(data, google.charts.Bar.convertOptions(options));
    });
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart_material"></div>

注意:在“全页”模式下打开上面的片段以获得更好的示例...