如何在数据类型为数字时对谷歌图表进行排序X轴 [英] How to sort google graphs X-axis when data type is number

问题描述

我有一个datatable，第一列是数字，范围在1到48之间：

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

我的代码如下所示：



  // Grid_Table是我的html表，包含数据
 // div是我的html div，其中图形被绘制
 
 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 = []; （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）; 
  

结果如下：


I have a datatable were first column is numbers in the range 1 to 48:

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

My code looks like this:

//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);

This results in a graph like this:

If I change the sort:

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

To:

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

I get the same result..

I want the lowest number to at the beginning of the graph. How to fix this?

解决方案

Continuous Axis (data type = number)

The hAxis will always plot the values in the order of the first column or X value for charts with a continuous axis.

As such, sorting the data prior to drawing the chart will have no effect.

There are two chart options that can be used to have the chart plot the values in either ascending or descending order, for the axis values only.

You can use hAxis.direction: 1 or -1 to reverse the order.

reverseCategories: true or false is also available.

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

Discrete Axis (data type = string)

When using a discrete axis, the data can be sorted however you want. Following are two examples, using the same data, but of different types.

Notice the X values are out of order on the first chart (discrete axis).

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

这篇关于如何在数据类型为数字时对谷歌图表进行排序X轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！