Javascript 当数据类型为数字时,如何对google图形X轴排序
我有一个数据表,第一列是1到48之间的数字:Javascript 当数据类型为数字时,如何对google图形X轴排序,javascript,html,graph,google-visualization,Javascript,Html,Graph,Google Visualization,我有一个数据表,第一列是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.visu
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);
致:
我得到了同样的结果
我想让最小的数字出现在图表的开头。如何解决此问题?连续轴(数据类型=编号) 对于具有连续轴的图表,
hAxis
将始终按照第一列或X值的顺序绘制值
因此,在绘制图表之前对数据进行排序不会产生任何效果
有两个图表选项可用于让图表按升序或降序绘制值,仅用于轴值
您可以使用hAxis.direction:1
或-1
反转顺序
反向分类:true
或false
也可用
在这种情况下,从hAxis
中删除direction:-1
,以获得所需的结果
离散轴(数据类型=字符串)
使用离散轴时,数据可以按照您的需要进行排序。
下面是两个示例,使用相同的数据,但类型不同
请注意,第一个图表(离散轴)上的X值顺序错误
google.load('visualization','1',{'packages':['corechart'],'callback':drawChart});
函数绘图图(){
var Grid_Table=document.getElementById(“Grid_Table”);
var div1=document.getElementById('chart_div1');
var div2=document.getElementById('chart_div2');
var data1=新的google.visualization.DataTable();
data1.addColumn('string','Step');
数据1.addColumn('number','Pct');
var data2=新的google.visualization.DataTable();
data2.addColumn('number','Step');
数据2.addColumn('number','Pct');
对于(var row=1;row
离散轴
连续轴
步
PCT
1.
0
2.
0
3.
0
4.
35
5.
45
6.
55
7.
60
8.
65
9
50
10
40
非常感谢您的支持。测试完成后我会给你回复的,像个魔咒一样!!谢谢
data.sort({ column: 0, asc: true });
data.sort({ column: 0, desc: true });