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>

https://i.imgur.com/nF97lE4.png

如何在水平轴上从低值到高值排序？感谢。

Answer 1

来自Google Visualization API Reference：

要按第三列排序，然后按第二列排序，请使用： data.sort（[{column：2}，{column：1}]）;

Answer 2

图片中显示的问题是加载数据表时使用'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>

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

排序谷歌条形图

2 个答案: