javascript - 当数据类型为数字时，如何对谷歌图X轴进行排序

Question

我有一个数据表，第一列是 1 到 48 范围内的数字:

Step    Pct 
1       0
2       0
3       0
4       35
5       45
6       55
7       60
...

我的代码如下所示:

//Grid_Table is my html table containing the data
//div is my html div where the graph is painted

var data = new google.visualization.DataTable();
data.addColumn('number', 'Step');
data.addColumn('number', 'Pct');
for (var row = 1; row < Grid_Table.rows.length; row++) {

    var rowArray = [];
    for (var col = 0; col < Grid_Table.rows[row].cells.length; col++) {

        rowVal =Number(Grid_Table.rows[row].cells[col].textContent) || 0;
        rowArray.push(rowVal);
    }
    data.addRow(rowArray);
}

var options = {

    title: 'Chart',
    legend: { textStyle: { fontSize: '12' } },
    hAxis: { title: 'Step', textStyle: { fontSize: '7'}, direction: -1, slantedText: true, slantedTextAngle: '45'},
    vAxis: { title: 'Pct', textStyle: { fontSize: '12' } },
    tooltip: { textStyle: { fontSize: '12' } },
    backgroundColor: '#eaeaea',
    };

data.sort({ column: 0, asc: true });

var chart = new google.visualization.ColumnChart(div);
chart.draw(data, options);

这会产生如下图:

如果我改变排序:

data.sort({ column: 0, asc: true });

致:

data.sort({ column: 0, desc: true });

我得到了相同的结果..

我想要最低的数字位于图表的开头。如何解决这个问题？

Answer 1

连续轴 (数据类型=数字)

hAxis 将始终按照第一列的顺序绘制值，或者对于具有连续轴的图表，按 X 值的顺序绘制值。

因此，在绘制图表之前对数据进行排序将不会产生任何效果。

有两个图表选项可用于让图表按升序或降序绘制值(仅限轴值)。

您可以使用hAxis.direction: 1或-1来反转顺序。

reverseCategories: true 或 false 也可用。

In this case, remove direction: -1 from the hAxis to get the desired result.

离散轴 (数据类型 = 字符串)

使用离散轴时，可以根据需要对数据进行排序。以下是两个示例，使用相同的数据，但类型不同。

请注意，第一个图表(离散轴)上的 X 值是乱序的。

google.load('visualization', '1', {'packages': ['corechart'], 'callback': drawChart});

function drawChart() {

  var Grid_Table = document.getElementById('Grid_Table');
  var div1 = document.getElementById('chart_div1');
  var div2 = document.getElementById('chart_div2');

  var data1 = new google.visualization.DataTable();
  data1.addColumn('string', 'Step');
  data1.addColumn('number', 'Pct');

  var data2 = new google.visualization.DataTable();
  data2.addColumn('number', 'Step');
  data2.addColumn('number', 'Pct');

  for (var row = 1; row < Grid_Table.rows.length; row++) {
      var rowArray1 = [];
      var rowArray2 = [];

      var rowVal = Grid_Table.rows[row].cells[0].textContent || '0';

      rowArray1.push(rowVal);
      rowVal = Number(rowVal);
      rowArray2.push(rowVal);

      rowVal = Number(Grid_Table.rows[row].cells[1].textContent) || 0;
      rowArray1.push(rowVal);
      rowArray2.push(rowVal);

      data1.addRow(rowArray1);
      data2.addRow(rowArray2);
  }

  var options1 = {
      title: 'Chart',
      legend: { textStyle: { fontSize: '12' } },
      hAxis: { title: 'Step', textStyle: { fontSize: '7'}, slantedText: true, slantedTextAngle: '45'},
      vAxis: { title: 'Pct', textStyle: { fontSize: '12' } },
      tooltip: { textStyle: { fontSize: '12' } },
      backgroundColor: '#eaeaea'
      };

  var options2 = {
      title: 'Chart',
      legend: { textStyle: { fontSize: '12' } },
      hAxis: { title: 'Step', textStyle: { fontSize: '7'}, slantedText: true, slantedTextAngle: '45'},
      vAxis: { title: 'Pct', textStyle: { fontSize: '12' } },
      tooltip: { textStyle: { fontSize: '12' } },
      backgroundColor: '#eaeaea'
      };

  data1.sort({ column: 1 });

  var chart = new google.visualization.ColumnChart(div1);
  chart.draw(data1, options1);

  var chart = new google.visualization.ColumnChart(div2);
  chart.draw(data2, options2);
}

<script src="https://www.google.com/jsapi"></script>
<div>Discrete Axis</div>
<div id="chart_div1"></div>
<br/>
<div>Continuous Axis</div>
<div id="chart_div2"></div>
<table id="Grid_Table">
  <tr>
    <th>Step</th>
    <th>Pct</th>
  </tr>
  <tr>
    <td>1</td>
    <td>0</td>
  </tr>
  <tr>
    <td>2</td>
    <td>0</td>
  </tr>
  <tr>
    <td>3</td>
    <td>0</td>
  </tr>
  <tr>
    <td>4</td>
    <td>35</td>
  </tr>
  <tr>
    <td>5</td>
    <td>45</td>
  </tr>
  <tr>
    <td>6</td>
    <td>55</td>
  </tr>
  <tr>
    <td>7</td>
    <td>60</td>
  </tr>
  <tr>
    <td>8</td>
    <td>65</td>
  </tr>
  <tr>
    <td>9</td>
    <td>50</td>
  </tr>
  <tr>
    <td>10</td>
    <td>40</td>
  </tr>
</table>

Discrete vs. Continuous