2016-05-24 127 views
1

谷歌圖表有沒有一個選項可以將x軸縮放比較細化?谷歌折線圖日期時間的X軸縮放

這裏是我的jsfiddle:https://jsfiddle.net/7z16m379/

如果放大的最後3天,X軸不顯示日期了,但只有時間。 只有當您選擇顯示24小時時段時,我纔想隱藏該日。

我閱讀了谷歌折線圖,但沒有找到任何選項。

感謝您的幫助

尼克

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
    <script type="text/javascript"> 
 
google.load('visualization', '1', {packages: ['controls', 'charteditor']}); 
 
google.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Month','Temps','r'], 
 
     [new Date(2016,05,12,21,44),599,590], 
 
[new Date(2016,05,13,04,04),578,567], 
 
[new Date(2016,05,13,16,54),2117,1486], 
 
[new Date(2016,05,13,17,05),2022,1122], 
 
[new Date(2016,05,13,17,16),2158,1626], 
 
[new Date(2016,05,13,17,26),2019,1409], 
 
[new Date(2016,05,13,17,47),1642,2249], 
 
[new Date(2016,05,13,17,58),1412,1542], 
 
[new Date(2016,05,13,18,09),1315,1882], 
 
[new Date(2016,05,13,18,20),1389,1570], 
 
[new Date(2016,05,13,18,31),1313,1888], 
 
[new Date(2016,05,13,18,42),1141,1383], 
 
[new Date(2016,05,13,18,53),997,1238], 
 
[new Date(2016,05,13,19,03),969,923], 
 
[new Date(2016,05,13,19,13),866,866], 
 
[new Date(2016,05,13,19,23),804,650], 
 
[new Date(2016,05,13,19,33),628,616], 
 
[new Date(2016,05,13,19,43),620,598], 
 
[new Date(2016,05,13,19,54),630,595], 
 
[new Date(2016,05,13,20,04),611,590], 
 
[new Date(2016,05,13,20,15),614,595], 
 
[new Date(2016,05,13,20,25),597,579], 
 
[new Date(2016,05,13,20,35),617,581], 
 
[new Date(2016,05,13,20,45),591,574], 
 
[new Date(2016,05,13,20,55),597,578], 
 
[new Date(2016,05,13,21,56),622,573], 
 
[new Date(2016,05,13,22,06),577,589], 
 
[new Date(2016,05,13,22,16),604,580], 
 
[new Date(2016,05,14,06,57),604,548], 
 
[new Date(2016,05,14,07,08),576,550], 
 
[new Date(2016,05,14,07,19),578,552], 
 
[new Date(2016,05,14,07,30),592,551], 
 
[new Date(2016,05,14,07,41),579,551], 
 
[new Date(2016,05,14,07,52),582,548], 
 
[new Date(2016,05,14,08,02),581,549], 
 
[new Date(2016,05,14,08,12),596,566], 
 
[new Date(2016,05,14,08,22),583,566], 
 
[new Date(2016,05,14,08,32),586,560], 
 
[new Date(2016,05,14,08,42),590,562], 
 
[new Date(2016,05,14,08,52),598,565], 
 
[new Date(2016,05,14,09,02),596,566], 
 
[new Date(2016,05,14,09,12),602,568], 
 
[new Date(2016,05,14,09,23),595,571], 
 
[new Date(2016,05,14,10,44),634,600], 
 
[new Date(2016,05,14,11,15),634,590], 
 
[new Date(2016,05,14,11,25),657,600], 
 
[new Date(2016,05,14,12,47),632,593], 
 
[new Date(2016,05,14,12,57),620,594], 
 
[new Date(2016,05,14,13,08),617,579], 
 
[new Date(2016,05,14,13,19),617,573], 
 
[new Date(2016,05,14,13,29),628,573], 
 
[new Date(2016,05,14,13,40),618,582], 
 
[new Date(2016,05,14,13,50),626,573], 
 
[new Date(2016,05,14,14,01),645,587], 
 
[new Date(2016,05,14,14,12),631,590], 
 
[new Date(2016,05,14,14,22),640,605], 
 
[new Date(2016,05,14,14,32),655,599], 
 
[new Date(2016,05,14,14,42),640,607], 
 
[new Date(2016,05,14,14,53),637,607], 
 
[new Date(2016,05,14,15,03),634,598], 
 
[new Date(2016,05,14,15,34),637,615], 
 
[new Date(2016,05,14,15,44),613,614], 
 
[new Date(2016,05,14,15,54),643,602], 
 
[new Date(2016,05,14,16,04),641,610], 
 
[new Date(2016,05,14,16,15),616,596], 
 
[new Date(2016,05,14,16,26),637,607], 
 
[new Date(2016,05,14,16,37),615,606], 
 
[new Date(2016,05,14,16,48),612,606], 
 
[new Date(2016,05,14,16,59),624,599], 
 
[new Date(2016,05,14,17,10),630,628], 
 
[new Date(2016,05,14,17,20),621,639], 
 
[new Date(2016,05,14,17,30),631,633], 
 
[new Date(2016,05,14,17,40),622,615], 
 
[new Date(2016,05,14,17,50),613,640], 
 
[new Date(2016,05,14,18,00),618,637], 
 
[new Date(2016,05,14,18,10),612,635], 
 
[new Date(2016,05,14,18,21),621,652], 
 
[new Date(2016,05,14,18,31),623,667], 
 
[new Date(2016,05,14,18,42),616,680], 
 
[new Date(2016,05,14,18,52),621,652], 
 
[new Date(2016,05,14,19,53),619,659], 
 
[new Date(2016,05,14,20,03),603,621], 
 
[new Date(2016,05,14,20,13),607,585], 
 
[new Date(2016,05,14,20,24),619,591], 
 
[new Date(2016,05,15,10,33),613,575], 
 
[new Date(2016,05,15,11,25),618,593], 
 
[new Date(2016,05,16,13,53),602,579], 
 
[new Date(2016,05,16,14,03),615,588], 
 
[new Date(2016,05,16,14,14),626,578], 
 
[new Date(2016,05,16,14,35),618,574], 
 
[new Date(2016,05,16,15,16),603,633], 
 
[new Date(2016,05,16,15,26),614,604], 
 
[new Date(2016,05,16,15,36),618,588], 
 
[new Date(2016,05,16,15,46),605,580], 
 
[new Date(2016,05,16,15,56),616,593], 
 
[new Date(2016,05,16,16,06),621,604], 
 
[new Date(2016,05,16,16,17),619,635], 
 
[new Date(2016,05,16,16,27),608,608], 
 
[new Date(2016,05,16,17,58),630,711], 
 
[new Date(2016,05,16,18,39),617,919], 
 
[new Date(2016,05,16,18,50),614,899], 
 
[new Date(2016,05,16,19,00),616,846], 
 
[new Date(2016,05,16,19,11),610,873], 
 
[new Date(2016,05,16,19,21),602,866], 
 
[new Date(2016,05,16,19,32),615,764], 
 
[new Date(2016,05,17,08,30),1147,1676], 
 
[new Date(2016,05,17,13,39),613,612], 
 
[new Date(2016,05,17,13,49),613,684], 
 
[new Date(2016,05,17,14,00),620,639], 
 
[new Date(2016,05,18,04,31),1141,541], 
 
[new Date(2016,05,18,04,42),1123,531], 
 
[new Date(2016,05,18,11,54),613,597], 
 
[new Date(2016,05,18,12,04),633,590], 
 
[new Date(2016,05,18,12,14),602,592], 
 
[new Date(2016,05,18,12,25),602,586], 
 
[new Date(2016,05,18,12,36),596,597], 
 
[new Date(2016,05,18,12,47),613,579], 
 
[new Date(2016,05,18,13,58),617,577], 
 
[new Date(2016,05,18,14,08),625,597], 
 
[new Date(2016,05,18,14,18),612,591], 
 
[new Date(2016,05,18,14,29),619,596], 
 
[new Date(2016,05,18,14,39),613,602], 
 
[new Date(2016,05,18,14,49),630,599], 
 
[new Date(2016,05,18,14,59),629,592], 
 
[new Date(2016,05,18,15,09),618,600], 
 
[new Date(2016,05,18,15,19),623,599], 
 
[new Date(2016,05,18,15,29),602,607], 
 
[new Date(2016,05,18,15,39),616,625], 
 
[new Date(2016,05,18,15,49),637,616], 
 
[new Date(2016,05,18,15,59),626,609], 
 
[new Date(2016,05,18,16,09),626,605], 
 
[new Date(2016,05,18,16,20),670,643], 
 
[new Date(2016,05,18,16,30),655,644], 
 
[new Date(2016,05,18,16,40),659,675], 
 
[new Date(2016,05,18,16,51),646,716], 
 
[new Date(2016,05,18,17,02),666,795], 
 
[new Date(2016,05,18,17,13),683,959], 
 
[new Date(2016,05,18,17,23),694,901], 
 
[new Date(2016,05,18,17,33),791,986], 
 
[new Date(2016,05,18,17,44),808,995], 
 
[new Date(2016,05,18,17,54),772,1269], 
 
[new Date(2016,05,18,18,04),802,1623], 
 
[new Date(2016,05,18,19,30),615,1075], 
 
[new Date(2016,05,19,14,21),620,593], 
 
[new Date(2016,05,19,14,31),623,609], 
 
[new Date(2016,05,19,14,41),629,600], 
 
[new Date(2016,05,19,14,52),611,600], 
 
[new Date(2016,05,19,15,03),624,597], 
 
[new Date(2016,05,19,18,06),1156,683], 
 
[new Date(2016,05,19,18,16),985,636], 
 
[new Date(2016,05,19,18,26),909,646], 
 
[new Date(2016,05,19,18,37),835,631], 
 
[new Date(2016,05,19,19,28),621,596], 
 
[new Date(2016,05,19,19,38),613,603], 
 
[new Date(2016,05,19,19,49),605,597], 
 
[new Date(2016,05,19,19,59),614,578], 
 
[new Date(2016,05,19,20,10),595,582], 
 
[new Date(2016,05,19,20,21),596,573], 
 
[new Date(2016,05,19,20,32),588,570], 
 
[new Date(2016,05,19,20,43),609,579], 
 
[new Date(2016,05,19,20,54),606,582], 
 
[new Date(2016,05,19,21,05),597,573], 
 
[new Date(2016,05,19,21,16),599,579], 
 
[new Date(2016,05,19,21,27),589,569], 
 
[new Date(2016,05,19,21,38),736,581], 
 
[new Date(2016,05,19,22,39),683,593], 
 
[new Date(2016,05,20,08,07),727,1244], 
 
[new Date(2016,05,20,08,18),744,1477], 
 
[new Date(2016,05,20,08,29),819,1843], 
 
[new Date(2016,05,20,08,40),764,1633], 
 
[new Date(2016,05,20,10,02),620,680], 
 
[new Date(2016,05,20,10,12),616,610], 
 
[new Date(2016,05,20,10,22),626,598], 
 
[new Date(2016,05,20,10,32),621,610], 
 
[new Date(2016,05,20,11,13),604,604], 
 
[new Date(2016,05,20,12,25),617,649], 
 
[new Date(2016,05,20,12,36),616,596], 
 
[new Date(2016,05,20,12,47),603,589], 
 
[new Date(2016,05,20,12,58),626,589], 
 
[new Date(2016,05,20,13,08),626,591], 
 
[new Date(2016,05,20,13,19),619,586], 
 
[new Date(2016,05,20,15,51),645,603], 
 
[new Date(2016,05,20,17,32),1459,817], 
 
[new Date(2016,05,20,18,03),1863,970], 
 
[new Date(2016,05,20,18,14),2064,1084], 
 
[new Date(2016,05,20,18,24),2080,1017], 
 
[new Date(2016,05,20,18,35),2179,775], 
 
[new Date(2016,05,20,18,46),1986,666], 
 
[new Date(2016,05,20,18,57),2364,665], 
 
[new Date(2016,05,20,19,08),1590,628], 
 
[new Date(2016,05,20,19,18),1630,605], 
 
[new Date(2016,05,20,19,29),1124,604], 
 
[new Date(2016,05,20,19,40),840,604], 
 
[new Date(2016,05,20,19,51),850,591], 
 
[new Date(2016,05,20,21,12),588,559], 
 
[new Date(2016,05,20,21,23),587,570], 
 
[new Date(2016,05,20,21,34),583,569], 
 
[new Date(2016,05,21,08,54),602,571], 
 
[new Date(2016,05,21,09,05),588,581], 
 
[new Date(2016,05,21,09,16),609,572], 
 
[new Date(2016,05,21,09,26),613,577], 
 
[new Date(2016,05,21,09,37),612,574], 
 
[new Date(2016,05,21,09,47),609,593], 
 
[new Date(2016,05,21,09,57),604,589], 
 
[new Date(2016,05,21,10,08),612,594], 
 
[new Date(2016,05,21,10,18),636,583], 
 
[new Date(2016,05,21,10,28),610,598], 
 
[new Date(2016,05,21,10,38),615,580], 
 
[new Date(2016,05,21,10,48),644,580], 
 
[new Date(2016,05,21,10,58),632,588], 
 
[new Date(2016,05,21,12,09),610,606], 
 
[new Date(2016,05,21,12,20),618,600], 
 
[new Date(2016,05,21,12,30),623,593], 
 
[new Date(2016,05,21,12,41),658,606], 
 
[new Date(2016,05,21,12,51),642,584], 
 
[new Date(2016,05,21,13,02),1000,584], 
 
[new Date(2016,05,21,17,41),612,773], 
 
[new Date(2016,05,21,17,51),607,738], 
 
[new Date(2016,05,21,18,02),616,735], 
 
[new Date(2016,05,21,18,12),629,736], 
 
[new Date(2016,05,21,18,22),629,780], 
 
[new Date(2016,05,21,18,32),635,814], 
 
[new Date(2016,05,21,19,13),616,925], 
 
[new Date(2016,05,21,20,26),605,604], 
 
[new Date(2016,05,21,20,37),594,591], 
 
[new Date(2016,05,21,20,48),560,584], 
 
[new Date(2016,05,21,20,59),597,559], 
 
[new Date(2016,05,21,22,10),603,579], 
 
[new Date(2016,05,21,22,21),590,581], 
 
[new Date(2016,05,21,22,31),602,602], 
 
[new Date(2016,05,21,22,42),582,588], 
 
[new Date(2016,05,21,22,52),604,586], 
 
[new Date(2016,05,21,23,02),609,567], 
 
[new Date(2016,05,21,23,12),593,573], 
 
[new Date(2016,05,21,23,22),568,603], 
 
[new Date(2016,05,22,09,13),605,561], 
 
[new Date(2016,05,22,09,24),598,553], 
 
[new Date(2016,05,22,09,34),604,587], 
 
[new Date(2016,05,22,09,45),597,558], 
 
[new Date(2016,05,22,09,55),609,569], 
 
[new Date(2016,05,22,10,06),604,570], 
 
[new Date(2016,05,22,10,17),603,587], 
 
[new Date(2016,05,22,10,28),603,581], 
 
[new Date(2016,05,22,10,39),616,579], 
 
[new Date(2016,05,22,10,49),625,581], 
 
[new Date(2016,05,22,11,00),616,580], 
 
[new Date(2016,05,22,11,11),623,591], 
 
[new Date(2016,05,22,11,22),626,602], 
 
[new Date(2016,05,22,11,33),619,582], 
 
[new Date(2016,05,22,11,44),625,585], 
 
[new Date(2016,05,22,11,55),615,580], 
 
[new Date(2016,05,22,12,06),598,582], 
 
[new Date(2016,05,22,12,17),628,584], 
 
[new Date(2016,05,22,12,27),621,572], 
 
[new Date(2016,05,22,12,37),611,565], 
 
[new Date(2016,05,22,12,47),604,559], 
 
[new Date(2016,05,22,12,57),592,575], 
 
[new Date(2016,05,22,13,07),594,592], 
 
[new Date(2016,05,22,13,17),606,575], 
 
[new Date(2016,05,22,13,27),624,573], 
 
[new Date(2016,05,22,13,37),602,586], 
 
[new Date(2016,05,22,13,48),591,587], 
 
[new Date(2016,05,22,13,58),595,571], 
 
[new Date(2016,05,22,14,08),616,582], 
 
[new Date(2016,05,22,14,18),626,582], 
 
[new Date(2016,05,22,14,28),615,579], 
 
[new Date(2016,05,22,14,38),615,574], 
 
[new Date(2016,05,22,14,48),606,584], 
 
[new Date(2016,05,22,14,58),614,575], 
 
[new Date(2016,05,22,15,08),606,577], 
 
[new Date(2016,05,22,15,18),619,578], 
 
[new Date(2016,05,22,16,19),607,581], 
 
[new Date(2016,05,22,16,30),600,583], 
 
[new Date(2016,05,22,21,21),585,575], 
 
[new Date(2016,05,22,22,12),598,588], 
 
[new Date(2016,05,22,22,22),613,591], 
 
[new Date(2016,05,23,08,24),621,1726], 
 
[new Date(2016,05,23,08,35),615,1627], 
 
[new Date(2016,05,23,08,46),640,1439], 
 
[new Date(2016,05,23,09,27),597,1182], 
 
[new Date(2016,05,23,09,38),610,1323], 
 
[new Date(2016,05,23,09,48),618,862], 
 
[new Date(2016,05,23,11,24),591,599], 
 
[new Date(2016,05,23,11,55),607,721], 
 
[new Date(2016,05,23,12,26),599,594], 
 
[new Date(2016,05,23,12,37),606,575], 
 
[new Date(2016,05,23,12,48),589,596], 
 
[new Date(2016,05,23,12,58),588,585], 
 
[new Date(2016,05,23,13,08),583,584], 
 
[new Date(2016,05,23,13,18),590,579], 
 
[new Date(2016,05,23,13,29),603,590], 
 
[new Date(2016,05,23,13,39),614,769], 
 
[new Date(2016,05,23,13,49),603,925], 
 
[new Date(2016,05,23,13,59),617,1090], 
 
[new Date(2016,05,23,14,09),615,790], 
 
[new Date(2016,05,23,14,19),616,610], 
 
[new Date(2016,05,23,14,30),597,634], 
 
[new Date(2016,05,23,15,12),613,607], 
 
[new Date(2016,05,23,15,23),617,604], 
 
[new Date(2016,05,23,15,34),611,589], 
 
[new Date(2016,05,23,15,44),606,600], 
 
[new Date(2016,05,23,15,54),627,608], 
 
[new Date(2016,05,23,16,05),775,598], 
 
[new Date(2016,05,23,16,28),828,606], 
 
[new Date(2016,05,23,16,40),679,727], 
 
[new Date(2016,05,23,16,51),669,932], 
 
[new Date(2016,05,23,17,02),706,1121], 
 
[new Date(2016,05,23,17,10),713,987], 
 
[new Date(2016,05,23,17,20),693,995], 
 
[new Date(2016,05,23,17,30),731,1175], 
 
[new Date(2016,05,23,17,40),716,978], 
 
[new Date(2016,05,23,17,50),669,1089], 
 
[new Date(2016,05,23,18,00),697,1243], 
 
[new Date(2016,05,23,18,10),641,1020], 
 
[new Date(2016,05,23,18,20),633,1216], 
 
[new Date(2016,05,23,18,30),604,901], 
 
[new Date(2016,05,23,18,40),619,774], 
 
[new Date(2016,05,23,18,50),616,723], 
 
[new Date(2016,05,23,19,00),602,671], 
 
[new Date(2016,05,23,19,10),604,608], 
 
[new Date(2016,05,23,19,20),608,595], 
 
[new Date(2016,05,23,19,30),608,592], 
 
[new Date(2016,05,23,19,40),601,581], 
 
[new Date(2016,05,23,19,50),606,574], 
 
[new Date(2016,05,23,20,00),585,574], 
 
[new Date(2016,05,23,20,10),587,579], 
 
[new Date(2016,05,23,20,20),606,610], 
 
[new Date(2016,05,23,20,30),594,573], 
 
[new Date(2016,05,23,20,40),585,571], 
 
[new Date(2016,05,23,20,50),584,574], 
 
[new Date(2016,05,23,21,00),597,571], 
 
[new Date(2016,05,23,21,10),584,572], 
 
[new Date(2016,05,23,21,20),601,575], 
 
[new Date(2016,05,23,21,30),599,594], 
 
[new Date(2016,05,23,21,40),603,627], 
 
[new Date(2016,05,23,21,50),602,642], 
 
[new Date(2016,05,23,22,00),611,638], 
 
[new Date(2016,05,23,22,10),607,650], 
 
[new Date(2016,05,24,10,10),621,587], 
 
[new Date(2016,05,24,10,20),611,588], 
 
[new Date(2016,05,24,10,30),608,590], 
 
[new Date(2016,05,24,10,40),604,605], 
 
[new Date(2016,05,24,10,50),606,599], 
 
[new Date(2016,05,24,11,00),614,604], 
 
[new Date(2016,05,24,11,10),619,592], 
 
[new Date(2016,05,24,11,20),616,590], 
 
[new Date(2016,05,24,11,30),604,584], 
 
[new Date(2016,05,24,11,40),598,588], 
 
[new Date(2016,05,24,11,50),608,595], 
 
[new Date(2016,05,24,12,00),609,602], 
 
[new Date(2016,05,24,12,10),600,595], 
 
[new Date(2016,05,24,12,20),608,575], 
 
[new Date(2016,05,24,12,30),627,600], 
 
[new Date(2016,05,24,12,40),607,604]  ]); 
 
     
 
     
 
     
 
    
 
    var dash = new google.visualization.Dashboard(document.getElementById('dashboard')); 
 

 
    var control = new google.visualization.ControlWrapper({ 
 
     controlType: 'ChartRangeFilter', 
 
     containerId: 'control_div', 
 
     options: { 
 
      filterColumnIndex: 0, 
 
      ui: { 
 
       chartOptions: { 
 
        height: '100', 
 
        width: '70%', 
 
        chartArea: { 
 
         width: '80%' 
 
        } 
 
       }, 
 
       chartView: { 
 
        columns: [0, 1] 
 
       } 
 
      } 
 
     } 
 
    }); 
 

 
    var chart = new google.visualization.ChartWrapper({ 
 
     chartType: 'LineChart', 
 
     containerId: 'chart_div' 
 
    }); 
 

 
    function setOptions (wrapper) { 
 
     // sets the options on the chart wrapper so that it draws correctly 
 
     // the chart editor automatically enables animations, which doesn't look right with the ChartRangeFilter 
 
     wrapper.setOption('height', '600'); 
 
     wrapper.setOption('width', '70%'); 
 
     wrapper.setOption('animation.duration', 0); 
 
    } 
 
    
 
    setOptions(chart); 
 
     
 
    
 
    
 
    dash.bind([control], [chart]); 
 
    dash.draw(data); 
 
} 
 
    
 
    </script> 
 

 

 

 

 

 
\t \t 
 

 
<div id="dashboard"> 
 
    <div id="chart_div"></div> 
 
    <div id="control_div"></div> 
 
</div> 
 

 

 

回答

1

您可以根據range值偵聽控制
'statechange'事件並調整格式

見下文荷蘭國際集團例子...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Month','Temps','r'], 
 
     [new Date(2016,05,12,21,44),599,590], 
 
     [new Date(2016,05,13,04,04),578,567], 
 
     [new Date(2016,05,13,16,54),2117,1486], 
 
     [new Date(2016,05,13,17,05),2022,1122], 
 
     [new Date(2016,05,13,17,16),2158,1626], 
 
     [new Date(2016,05,13,17,26),2019,1409], 
 
     [new Date(2016,05,13,17,47),1642,2249], 
 
     [new Date(2016,05,13,17,58),1412,1542], 
 
     [new Date(2016,05,13,18,09),1315,1882], 
 
     [new Date(2016,05,13,18,20),1389,1570], 
 
     [new Date(2016,05,13,18,31),1313,1888], 
 
     [new Date(2016,05,13,18,42),1141,1383], 
 
     [new Date(2016,05,13,18,53),997,1238], 
 
     [new Date(2016,05,13,19,03),969,923], 
 
     [new Date(2016,05,13,19,13),866,866], 
 
     [new Date(2016,05,13,19,23),804,650], 
 
     [new Date(2016,05,13,19,33),628,616], 
 
     [new Date(2016,05,13,19,43),620,598], 
 
     [new Date(2016,05,13,19,54),630,595], 
 
     [new Date(2016,05,13,20,04),611,590], 
 
     [new Date(2016,05,13,20,15),614,595], 
 
     [new Date(2016,05,13,20,25),597,579], 
 
     [new Date(2016,05,13,20,35),617,581], 
 
     [new Date(2016,05,13,20,45),591,574], 
 
     [new Date(2016,05,13,20,55),597,578], 
 
     [new Date(2016,05,13,21,56),622,573], 
 
     [new Date(2016,05,13,22,06),577,589], 
 
     [new Date(2016,05,13,22,16),604,580], 
 
     [new Date(2016,05,14,06,57),604,548], 
 
     [new Date(2016,05,14,07,08),576,550], 
 
     [new Date(2016,05,14,07,19),578,552], 
 
     [new Date(2016,05,14,07,30),592,551], 
 
     [new Date(2016,05,14,07,41),579,551], 
 
     [new Date(2016,05,14,07,52),582,548], 
 
     [new Date(2016,05,14,08,02),581,549], 
 
     [new Date(2016,05,14,08,12),596,566], 
 
     [new Date(2016,05,14,08,22),583,566], 
 
     [new Date(2016,05,14,08,32),586,560], 
 
     [new Date(2016,05,14,08,42),590,562], 
 
     [new Date(2016,05,14,08,52),598,565], 
 
     [new Date(2016,05,14,09,02),596,566], 
 
     [new Date(2016,05,14,09,12),602,568], 
 
     [new Date(2016,05,14,09,23),595,571], 
 
     [new Date(2016,05,14,10,44),634,600], 
 
     [new Date(2016,05,14,11,15),634,590], 
 
     [new Date(2016,05,14,11,25),657,600], 
 
     [new Date(2016,05,14,12,47),632,593], 
 
     [new Date(2016,05,14,12,57),620,594], 
 
     [new Date(2016,05,14,13,08),617,579], 
 
     [new Date(2016,05,14,13,19),617,573], 
 
     [new Date(2016,05,14,13,29),628,573], 
 
     [new Date(2016,05,14,13,40),618,582], 
 
     [new Date(2016,05,14,13,50),626,573], 
 
     [new Date(2016,05,14,14,01),645,587], 
 
     [new Date(2016,05,14,14,12),631,590], 
 
     [new Date(2016,05,14,14,22),640,605], 
 
     [new Date(2016,05,14,14,32),655,599], 
 
     [new Date(2016,05,14,14,42),640,607], 
 
     [new Date(2016,05,14,14,53),637,607], 
 
     [new Date(2016,05,14,15,03),634,598], 
 
     [new Date(2016,05,14,15,34),637,615], 
 
     [new Date(2016,05,14,15,44),613,614], 
 
     [new Date(2016,05,14,15,54),643,602], 
 
     [new Date(2016,05,14,16,04),641,610], 
 
     [new Date(2016,05,14,16,15),616,596], 
 
     [new Date(2016,05,14,16,26),637,607], 
 
     [new Date(2016,05,14,16,37),615,606], 
 
     [new Date(2016,05,14,16,48),612,606], 
 
     [new Date(2016,05,14,16,59),624,599], 
 
     [new Date(2016,05,14,17,10),630,628], 
 
     [new Date(2016,05,14,17,20),621,639], 
 
     [new Date(2016,05,14,17,30),631,633], 
 
     [new Date(2016,05,14,17,40),622,615], 
 
     [new Date(2016,05,14,17,50),613,640], 
 
     [new Date(2016,05,14,18,00),618,637], 
 
     [new Date(2016,05,14,18,10),612,635], 
 
     [new Date(2016,05,14,18,21),621,652], 
 
     [new Date(2016,05,14,18,31),623,667], 
 
     [new Date(2016,05,14,18,42),616,680], 
 
     [new Date(2016,05,14,18,52),621,652], 
 
     [new Date(2016,05,14,19,53),619,659], 
 
     [new Date(2016,05,14,20,03),603,621], 
 
     [new Date(2016,05,14,20,13),607,585], 
 
     [new Date(2016,05,14,20,24),619,591], 
 
     [new Date(2016,05,15,10,33),613,575], 
 
     [new Date(2016,05,15,11,25),618,593], 
 
     [new Date(2016,05,16,13,53),602,579], 
 
     [new Date(2016,05,16,14,03),615,588], 
 
     [new Date(2016,05,16,14,14),626,578], 
 
     [new Date(2016,05,16,14,35),618,574], 
 
     [new Date(2016,05,16,15,16),603,633], 
 
     [new Date(2016,05,16,15,26),614,604], 
 
     [new Date(2016,05,16,15,36),618,588], 
 
     [new Date(2016,05,16,15,46),605,580], 
 
     [new Date(2016,05,16,15,56),616,593], 
 
     [new Date(2016,05,16,16,06),621,604], 
 
     [new Date(2016,05,16,16,17),619,635], 
 
     [new Date(2016,05,16,16,27),608,608], 
 
     [new Date(2016,05,16,17,58),630,711], 
 
     [new Date(2016,05,16,18,39),617,919], 
 
     [new Date(2016,05,16,18,50),614,899], 
 
     [new Date(2016,05,16,19,00),616,846], 
 
     [new Date(2016,05,16,19,11),610,873], 
 
     [new Date(2016,05,16,19,21),602,866], 
 
     [new Date(2016,05,16,19,32),615,764], 
 
     [new Date(2016,05,17,08,30),1147,1676], 
 
     [new Date(2016,05,17,13,39),613,612], 
 
     [new Date(2016,05,17,13,49),613,684], 
 
     [new Date(2016,05,17,14,00),620,639], 
 
     [new Date(2016,05,18,04,31),1141,541], 
 
     [new Date(2016,05,18,04,42),1123,531], 
 
     [new Date(2016,05,18,11,54),613,597], 
 
     [new Date(2016,05,18,12,04),633,590], 
 
     [new Date(2016,05,18,12,14),602,592], 
 
     [new Date(2016,05,18,12,25),602,586], 
 
     [new Date(2016,05,18,12,36),596,597], 
 
     [new Date(2016,05,18,12,47),613,579], 
 
     [new Date(2016,05,18,13,58),617,577], 
 
     [new Date(2016,05,18,14,08),625,597], 
 
     [new Date(2016,05,18,14,18),612,591], 
 
     [new Date(2016,05,18,14,29),619,596], 
 
     [new Date(2016,05,18,14,39),613,602], 
 
     [new Date(2016,05,18,14,49),630,599], 
 
     [new Date(2016,05,18,14,59),629,592], 
 
     [new Date(2016,05,18,15,09),618,600], 
 
     [new Date(2016,05,18,15,19),623,599], 
 
     [new Date(2016,05,18,15,29),602,607], 
 
     [new Date(2016,05,18,15,39),616,625], 
 
     [new Date(2016,05,18,15,49),637,616], 
 
     [new Date(2016,05,18,15,59),626,609], 
 
     [new Date(2016,05,18,16,09),626,605], 
 
     [new Date(2016,05,18,16,20),670,643], 
 
     [new Date(2016,05,18,16,30),655,644], 
 
     [new Date(2016,05,18,16,40),659,675], 
 
     [new Date(2016,05,18,16,51),646,716], 
 
     [new Date(2016,05,18,17,02),666,795], 
 
     [new Date(2016,05,18,17,13),683,959], 
 
     [new Date(2016,05,18,17,23),694,901], 
 
     [new Date(2016,05,18,17,33),791,986], 
 
     [new Date(2016,05,18,17,44),808,995], 
 
     [new Date(2016,05,18,17,54),772,1269], 
 
     [new Date(2016,05,18,18,04),802,1623], 
 
     [new Date(2016,05,18,19,30),615,1075], 
 
     [new Date(2016,05,19,14,21),620,593], 
 
     [new Date(2016,05,19,14,31),623,609], 
 
     [new Date(2016,05,19,14,41),629,600], 
 
     [new Date(2016,05,19,14,52),611,600], 
 
     [new Date(2016,05,19,15,03),624,597], 
 
     [new Date(2016,05,19,18,06),1156,683], 
 
     [new Date(2016,05,19,18,16),985,636], 
 
     [new Date(2016,05,19,18,26),909,646], 
 
     [new Date(2016,05,19,18,37),835,631], 
 
     [new Date(2016,05,19,19,28),621,596], 
 
     [new Date(2016,05,19,19,38),613,603], 
 
     [new Date(2016,05,19,19,49),605,597], 
 
     [new Date(2016,05,19,19,59),614,578], 
 
     [new Date(2016,05,19,20,10),595,582], 
 
     [new Date(2016,05,19,20,21),596,573], 
 
     [new Date(2016,05,19,20,32),588,570], 
 
     [new Date(2016,05,19,20,43),609,579], 
 
     [new Date(2016,05,19,20,54),606,582], 
 
     [new Date(2016,05,19,21,05),597,573], 
 
     [new Date(2016,05,19,21,16),599,579], 
 
     [new Date(2016,05,19,21,27),589,569], 
 
     [new Date(2016,05,19,21,38),736,581], 
 
     [new Date(2016,05,19,22,39),683,593], 
 
     [new Date(2016,05,20,08,07),727,1244], 
 
     [new Date(2016,05,20,08,18),744,1477], 
 
     [new Date(2016,05,20,08,29),819,1843], 
 
     [new Date(2016,05,20,08,40),764,1633], 
 
     [new Date(2016,05,20,10,02),620,680], 
 
     [new Date(2016,05,20,10,12),616,610], 
 
     [new Date(2016,05,20,10,22),626,598], 
 
     [new Date(2016,05,20,10,32),621,610], 
 
     [new Date(2016,05,20,11,13),604,604], 
 
     [new Date(2016,05,20,12,25),617,649], 
 
     [new Date(2016,05,20,12,36),616,596], 
 
     [new Date(2016,05,20,12,47),603,589], 
 
     [new Date(2016,05,20,12,58),626,589], 
 
     [new Date(2016,05,20,13,08),626,591], 
 
     [new Date(2016,05,20,13,19),619,586], 
 
     [new Date(2016,05,20,15,51),645,603], 
 
     [new Date(2016,05,20,17,32),1459,817], 
 
     [new Date(2016,05,20,18,03),1863,970], 
 
     [new Date(2016,05,20,18,14),2064,1084], 
 
     [new Date(2016,05,20,18,24),2080,1017], 
 
     [new Date(2016,05,20,18,35),2179,775], 
 
     [new Date(2016,05,20,18,46),1986,666], 
 
     [new Date(2016,05,20,18,57),2364,665], 
 
     [new Date(2016,05,20,19,08),1590,628], 
 
     [new Date(2016,05,20,19,18),1630,605], 
 
     [new Date(2016,05,20,19,29),1124,604], 
 
     [new Date(2016,05,20,19,40),840,604], 
 
     [new Date(2016,05,20,19,51),850,591], 
 
     [new Date(2016,05,20,21,12),588,559], 
 
     [new Date(2016,05,20,21,23),587,570], 
 
     [new Date(2016,05,20,21,34),583,569], 
 
     [new Date(2016,05,21,08,54),602,571], 
 
     [new Date(2016,05,21,09,05),588,581], 
 
     [new Date(2016,05,21,09,16),609,572], 
 
     [new Date(2016,05,21,09,26),613,577], 
 
     [new Date(2016,05,21,09,37),612,574], 
 
     [new Date(2016,05,21,09,47),609,593], 
 
     [new Date(2016,05,21,09,57),604,589], 
 
     [new Date(2016,05,21,10,08),612,594], 
 
     [new Date(2016,05,21,10,18),636,583], 
 
     [new Date(2016,05,21,10,28),610,598], 
 
     [new Date(2016,05,21,10,38),615,580], 
 
     [new Date(2016,05,21,10,48),644,580], 
 
     [new Date(2016,05,21,10,58),632,588], 
 
     [new Date(2016,05,21,12,09),610,606], 
 
     [new Date(2016,05,21,12,20),618,600], 
 
     [new Date(2016,05,21,12,30),623,593], 
 
     [new Date(2016,05,21,12,41),658,606], 
 
     [new Date(2016,05,21,12,51),642,584], 
 
     [new Date(2016,05,21,13,02),1000,584], 
 
     [new Date(2016,05,21,17,41),612,773], 
 
     [new Date(2016,05,21,17,51),607,738], 
 
     [new Date(2016,05,21,18,02),616,735], 
 
     [new Date(2016,05,21,18,12),629,736], 
 
     [new Date(2016,05,21,18,22),629,780], 
 
     [new Date(2016,05,21,18,32),635,814], 
 
     [new Date(2016,05,21,19,13),616,925], 
 
     [new Date(2016,05,21,20,26),605,604], 
 
     [new Date(2016,05,21,20,37),594,591], 
 
     [new Date(2016,05,21,20,48),560,584], 
 
     [new Date(2016,05,21,20,59),597,559], 
 
     [new Date(2016,05,21,22,10),603,579], 
 
     [new Date(2016,05,21,22,21),590,581], 
 
     [new Date(2016,05,21,22,31),602,602], 
 
     [new Date(2016,05,21,22,42),582,588], 
 
     [new Date(2016,05,21,22,52),604,586], 
 
     [new Date(2016,05,21,23,02),609,567], 
 
     [new Date(2016,05,21,23,12),593,573], 
 
     [new Date(2016,05,21,23,22),568,603], 
 
     [new Date(2016,05,22,09,13),605,561], 
 
     [new Date(2016,05,22,09,24),598,553], 
 
     [new Date(2016,05,22,09,34),604,587], 
 
     [new Date(2016,05,22,09,45),597,558], 
 
     [new Date(2016,05,22,09,55),609,569], 
 
     [new Date(2016,05,22,10,06),604,570], 
 
     [new Date(2016,05,22,10,17),603,587], 
 
     [new Date(2016,05,22,10,28),603,581], 
 
     [new Date(2016,05,22,10,39),616,579], 
 
     [new Date(2016,05,22,10,49),625,581], 
 
     [new Date(2016,05,22,11,00),616,580], 
 
     [new Date(2016,05,22,11,11),623,591], 
 
     [new Date(2016,05,22,11,22),626,602], 
 
     [new Date(2016,05,22,11,33),619,582], 
 
     [new Date(2016,05,22,11,44),625,585], 
 
     [new Date(2016,05,22,11,55),615,580], 
 
     [new Date(2016,05,22,12,06),598,582], 
 
     [new Date(2016,05,22,12,17),628,584], 
 
     [new Date(2016,05,22,12,27),621,572], 
 
     [new Date(2016,05,22,12,37),611,565], 
 
     [new Date(2016,05,22,12,47),604,559], 
 
     [new Date(2016,05,22,12,57),592,575], 
 
     [new Date(2016,05,22,13,07),594,592], 
 
     [new Date(2016,05,22,13,17),606,575], 
 
     [new Date(2016,05,22,13,27),624,573], 
 
     [new Date(2016,05,22,13,37),602,586], 
 
     [new Date(2016,05,22,13,48),591,587], 
 
     [new Date(2016,05,22,13,58),595,571], 
 
     [new Date(2016,05,22,14,08),616,582], 
 
     [new Date(2016,05,22,14,18),626,582], 
 
     [new Date(2016,05,22,14,28),615,579], 
 
     [new Date(2016,05,22,14,38),615,574], 
 
     [new Date(2016,05,22,14,48),606,584], 
 
     [new Date(2016,05,22,14,58),614,575], 
 
     [new Date(2016,05,22,15,08),606,577], 
 
     [new Date(2016,05,22,15,18),619,578], 
 
     [new Date(2016,05,22,16,19),607,581], 
 
     [new Date(2016,05,22,16,30),600,583], 
 
     [new Date(2016,05,22,21,21),585,575], 
 
     [new Date(2016,05,22,22,12),598,588], 
 
     [new Date(2016,05,22,22,22),613,591], 
 
     [new Date(2016,05,23,08,24),621,1726], 
 
     [new Date(2016,05,23,08,35),615,1627], 
 
     [new Date(2016,05,23,08,46),640,1439], 
 
     [new Date(2016,05,23,09,27),597,1182], 
 
     [new Date(2016,05,23,09,38),610,1323], 
 
     [new Date(2016,05,23,09,48),618,862], 
 
     [new Date(2016,05,23,11,24),591,599], 
 
     [new Date(2016,05,23,11,55),607,721], 
 
     [new Date(2016,05,23,12,26),599,594], 
 
     [new Date(2016,05,23,12,37),606,575], 
 
     [new Date(2016,05,23,12,48),589,596], 
 
     [new Date(2016,05,23,12,58),588,585], 
 
     [new Date(2016,05,23,13,08),583,584], 
 
     [new Date(2016,05,23,13,18),590,579], 
 
     [new Date(2016,05,23,13,29),603,590], 
 
     [new Date(2016,05,23,13,39),614,769], 
 
     [new Date(2016,05,23,13,49),603,925], 
 
     [new Date(2016,05,23,13,59),617,1090], 
 
     [new Date(2016,05,23,14,09),615,790], 
 
     [new Date(2016,05,23,14,19),616,610], 
 
     [new Date(2016,05,23,14,30),597,634], 
 
     [new Date(2016,05,23,15,12),613,607], 
 
     [new Date(2016,05,23,15,23),617,604], 
 
     [new Date(2016,05,23,15,34),611,589], 
 
     [new Date(2016,05,23,15,44),606,600], 
 
     [new Date(2016,05,23,15,54),627,608], 
 
     [new Date(2016,05,23,16,05),775,598], 
 
     [new Date(2016,05,23,16,28),828,606], 
 
     [new Date(2016,05,23,16,40),679,727], 
 
     [new Date(2016,05,23,16,51),669,932], 
 
     [new Date(2016,05,23,17,02),706,1121], 
 
     [new Date(2016,05,23,17,10),713,987], 
 
     [new Date(2016,05,23,17,20),693,995], 
 
     [new Date(2016,05,23,17,30),731,1175], 
 
     [new Date(2016,05,23,17,40),716,978], 
 
     [new Date(2016,05,23,17,50),669,1089], 
 
     [new Date(2016,05,23,18,00),697,1243], 
 
     [new Date(2016,05,23,18,10),641,1020], 
 
     [new Date(2016,05,23,18,20),633,1216], 
 
     [new Date(2016,05,23,18,30),604,901], 
 
     [new Date(2016,05,23,18,40),619,774], 
 
     [new Date(2016,05,23,18,50),616,723], 
 
     [new Date(2016,05,23,19,00),602,671], 
 
     [new Date(2016,05,23,19,10),604,608], 
 
     [new Date(2016,05,23,19,20),608,595], 
 
     [new Date(2016,05,23,19,30),608,592], 
 
     [new Date(2016,05,23,19,40),601,581], 
 
     [new Date(2016,05,23,19,50),606,574], 
 
     [new Date(2016,05,23,20,00),585,574], 
 
     [new Date(2016,05,23,20,10),587,579], 
 
     [new Date(2016,05,23,20,20),606,610], 
 
     [new Date(2016,05,23,20,30),594,573], 
 
     [new Date(2016,05,23,20,40),585,571], 
 
     [new Date(2016,05,23,20,50),584,574], 
 
     [new Date(2016,05,23,21,00),597,571], 
 
     [new Date(2016,05,23,21,10),584,572], 
 
     [new Date(2016,05,23,21,20),601,575], 
 
     [new Date(2016,05,23,21,30),599,594], 
 
     [new Date(2016,05,23,21,40),603,627], 
 
     [new Date(2016,05,23,21,50),602,642], 
 
     [new Date(2016,05,23,22,00),611,638], 
 
     [new Date(2016,05,23,22,10),607,650], 
 
     [new Date(2016,05,24,10,10),621,587], 
 
     [new Date(2016,05,24,10,20),611,588], 
 
     [new Date(2016,05,24,10,30),608,590], 
 
     [new Date(2016,05,24,10,40),604,605], 
 
     [new Date(2016,05,24,10,50),606,599], 
 
     [new Date(2016,05,24,11,00),614,604], 
 
     [new Date(2016,05,24,11,10),619,592], 
 
     [new Date(2016,05,24,11,20),616,590], 
 
     [new Date(2016,05,24,11,30),604,584], 
 
     [new Date(2016,05,24,11,40),598,588], 
 
     [new Date(2016,05,24,11,50),608,595], 
 
     [new Date(2016,05,24,12,00),609,602], 
 
     [new Date(2016,05,24,12,10),600,595], 
 
     [new Date(2016,05,24,12,20),608,575], 
 
     [new Date(2016,05,24,12,30),627,600], 
 
     [new Date(2016,05,24,12,40),607,604] 
 
    ]); 
 

 
    var dash = new google.visualization.Dashboard(document.getElementById('dashboard')); 
 

 
    var control = new google.visualization.ControlWrapper({ 
 
     controlType: 'ChartRangeFilter', 
 
     containerId: 'control_div', 
 
     options: { 
 
     filterColumnIndex: 0, 
 
     ui: { 
 
      chartOptions: { 
 
      height: '100', 
 
      width: '70%', 
 
      chartArea: { 
 
       width: '80%' 
 
      } 
 
      }, 
 
      chartView: { 
 
      columns: [0, 1] 
 
      } 
 
     } 
 
     } 
 
    }); 
 

 
    var chart = new google.visualization.ChartWrapper({ 
 
     chartType: 'LineChart', 
 
     containerId: 'chart_div' 
 
    }); 
 

 
    google.visualization.events.addListener(control, 'statechange', function() { 
 
     var dateRange = control.getState().range; 
 
     var dayInMS = 1 * 24 * 60 * 60 * 1000; 
 
     var periodShown = dateRange.end.getTime() - dateRange.start.getTime(); 
 
     if (periodShown <= dayInMS) { 
 
     chart.setOption('hAxis.format', 'H:MM:SS'); 
 
     } else { 
 
     chart.setOption('hAxis.format', 'MM/dd/yyyy'); 
 
     } 
 
     chart.draw(); 
 
    }); 
 

 
    function setOptions(wrapper) { 
 
     wrapper.setOption('height', '600'); 
 
     wrapper.setOption('width', '70%'); 
 
     wrapper.setOption('animation.duration', 0); 
 
     wrapper.setOption('hAxis.format', 'MM/dd/yyyy'); 
 
    } 
 

 
    setOptions(chart); 
 

 
    dash.bind([control], [chart]); 
 
    dash.draw(data); 
 
    }, 
 
    packages: ['controls', 'corechart'] 
 
});
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="dashboard"> 
 
    <div id="chart_div"></div> 
 
    <div id="control_div"></div> 
 
</div>

+0

謝謝您的回答,但是這不正是我想做的事情。 您給出的選項是設置x軸格式。 我想要使用下面的控制欄動態更改格式。如果我顯示24小時數據,我需要查看小時,如果我想顯示超過1天,則需要查看日期。 感謝您的幫助 – Nicolas

+0

不確定要了解最後一個答案。 「基於控制值,請參閱編輯...」???我怎麼能改變它? – Nicolas

+0

我改變了答案,使用控制範圍值 - 現在當範圍顯示24小時或更少時,'hAxis.format'將改變 - 請參閱'statechange''事件 – WhiteHat