Question

您好我试图显示h轴上的所有值从12开始并以20 shold显示结束 12,13,14,15,16,17,18,19,20。

我尝试使用刻度线

hAxis: {
    ticks: dataTable.getDistinctValues(0);
}

上面的代码行不起作用。

以下是我当前的代码

<html><head><script type="text/javascript" src="https://www.google.com/jsapi"></script>        <script type="text/javascript"> 
 google.load("visualization", "1.1", {packages:["corechart"]});
 google.setOnLoadCallback(drawChart);
 function drawChart() {
 var data = new google.visualization.DataTable();
 data.addColumn('datetime', 'Dates'); 
 data.addColumn('number','Glucose');     data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});  
 data.addColumn('number','Glucose');     data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});  
 data.addColumn('number','Glucose');    data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}}); 
 data.addColumn('number','Glucose');    data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});  
 data.addColumn('number','Glucose');    data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});  
 data.addColumn('number','Glucose');    data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}}); 
 data.addColumn('number','Glucose');    data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}}); 

 data.addRows([                            
 [new Date(2014,1,7,11,25,0,0), 110.00, '02 feb - 11:25 | 110.00\\nSunday', null, null, null, null, null, null, null, null, null, null, null, null], 
 [new Date(2014,1,7,11,26,0,0), null, null, null, null, 150.00, '04 feb - 11:26 | 150.00\\nTue', null, null, null, null, null, null, null, null],   
 [new Date(2014,1,7,11,35,0,0), null, null, null, null, null, null, 90.00, '05 feb - 11:35 | 90.00\\nHhgg', null, null, null, null, null, null],   
 [new Date(2014,1,7,11,36,0,0), null, null, null, null, null, null, null, null, 70.00, '06 feb - 11:36 | 70.00\\nHhj', null, null, null, null],  
 [new Date(2014,1,7,11,54,0,0), null, null, null, null, 100.00, '04 feb - 11:54 | 100.00\\nCc', null, null, null, null, null, null, null, null],  
 [new Date(2014,1,7,13,27,0,0), null, null, null, null, null, null, 258.00, '05 feb - 13:27 | 258.00\\nThu', null, null, null, null, null, null], 
 [new Date(2014,1,7,15,57,0,0), null, null, null, null, 123.00, '04 feb - 15:57 | 123.00\\nGhgggf', null, null, null, null, null, null, null, null], 
 [new Date(2014,1,7,20,0,0,0), null, null, null, null, null, null, null, null, null, null, null, null, 120.00, '01 feb - 20:00 | 120.00\\nSat'],    
 [new Date(2014,1,7,20,42,0,0), null, null, 115.00, '03 feb - 20:42 | 115.00\\nMon', null, null, null, null, null, null, null, null, null, null]  
 ]);                  
 var chart = new     google.visualization.ScatterChart(document.getElementById('chart_div'));  
 chart.setAction({ id: 'sample', text: 'Ver detalles', 
action: function() 
{ 
selection = chart.getSelection(); var selectedRow = selection[0].row;  
window.location.href = "yourapp://"+selectedRow;    
}              
}); 
chart.draw(data,                                                   
 {width: 280, height: 140,                                               
 actionsMenu: {textStyle: {color: '#343434',fontName: 'verdana',fontSize:12}},   
 chartArea:{top:20,left:35,width: '85%',height: '70%'}, 
 legend: { position: 'bottom', alignment:'start'},      
 backgroundColor:'transparent',                          
 legend: {position: 'none'},                       
 titleTextStyle:{color: 'black', fontName: 'verdana', fontSize: 8}, 
 hAxis: {format: 'H', textStyle: {color: '#343434',fontName:   'verdana',fontSize:6},baselineColor:'transparent',gridlineColor:  'transparent',viewWindowMode:'explicit', viewWindow:{ min: new Date(2014,1,7,11,25,0,0), max: new Date(2014,1,7,20,42,0,0)}},     

 vAxis: {title:'Glucosa',textStyle: {color: '#343434',fontName: 'verdana',fontSize:6},baselineColor:'transparent',gridlineColor: 'transparent'},  
 fontSize: 6,                                      
 tooltip:{textStyle:{color: '#343434', fontName:'verdana',fontSize: 10},trigger: 'selection'},   

 series: {                                                  
 0:{color: '#CCCCCC', visibleInLegend:true, pointSize:6},   
 1:{color: '#ffff00', visibleInLegend:true, pointSize:6},  
 2:{color: '#ff0000', visibleInLegend:true, pointSize:6}, 
 3:{color: '#0000ff', visibleInLegend:true, pointSize:6},  
 4:{color: '#008000', visibleInLegend:true, pointSize:6},    
 5:{color: '#696969', visibleInLegend:true, pointSize:6},   
 6:{color: '#ff00ff', visibleInLegend:true, pointSize:6}   
 },});                           
 google.visualization.events.addListener(chart, 'click', function(e) 
 {                            
 var targetType = e.targetID ? e.targetID.split('#')[0] : null;     
 if (targetType && targetType !== 'point' && targetType !== 'action' && targetType !== 'tooltip')
 {                            
 chart.setSelection([]); 
 }                            
 });                            
 }

此处附有图片，显示上述代码的输出。

outoput of above code

Answer 1

在您的情况下dataTable.getDistinctValues(0)返回的值列表不会返回将创建所需数组的列表。这是dataTable.getDistinctValues(0)：

返回的内容

[
    new Date(2014, 1, 7, 11, 25),
    new Date(2014, 1, 7, 11, 26),
    new Date(2014, 1, 7, 11, 35),
    new Date(2014, 1, 7, 11, 36),
    new Date(2014, 1, 7, 11, 54),
    new Date(2014, 1, 7, 13, 27),
    new Date(2014, 1, 7, 15, 57),
    new Date(2014, 1, 7, 20),
    new Date(2014, 1, 7, 20, 42)
]

这就是你想要的数组应该是这样的：

[
    new Date(2014, 1, 7, 12),
    new Date(2014, 1, 7, 13),
    new Date(2014, 1, 7, 14),
    new Date(2014, 1, 7, 15),
    new Date(2014, 1, 7, 16),
    new Date(2014, 1, 7, 17),
    new Date(2014, 1, 7, 18),
    new Date(2014, 1, 7, 19),
    new Date(2014, 1, 7, 20)
]

Google图表api图表显示h轴上的所有值

1 个答案: