如何排序谷歌的圖表的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