数据类型为数字时如何对谷歌图表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 也可用。

在这种情况下，从hAxis 中删除direction: -1 以获得所需的结果。

离散轴 （数据类型=字符串）

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

请注意，第一个图表（离散轴）上的 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