引用文件 <head> 部分測試
<script src="../../static/js/Highcharts-3.0.5/js/highcharts.js"></script>
<script>spa
1 function draw() { 2 var xTime = new Array() 3 var yData = new Array() 4 $.getJSON('/admin/proceData/?systemtype='+ $('#systemtype').val() +'&begintime='+ $('#begindatetime').val() +'&endtime='+ $('#enddatetime').val() +'&datatype='+ $('#datatype').val() +'&indexname='+ $('#indexname').val(),function (data) { 5 for (i in data){ 6 yData.push(data[i][2]/1000) 7 xTime.push(data[i][4]) 8 } 9 $('#container').highcharts({ 10 title: { 11 text: 'splunk索引數據走勢圖', 12 x: -20 //center 13 }, 14 subtitle: { 15 text: '測試版本', 16 x: -20 17 }, 18 19 xAxis: { 20 categories: xTime 21 }, 22 yAxis: { 23 title: { 24 text: '數據量' 25 }, 26 plotLines: [{ 27 value: 0, 28 width: 1, 29 color: '#808080' 30 }] 31 }, 32 tooltip: { 33 valueSuffix: 'GB' 34 }, 35 legend: { 36 layout: 'vertical', 37 align: 'right', 38 verticalAlign: 'middle', 39 borderWidth: 0 40 }, 41 series: [{ 42 name: 'splunk索引數據', 43 data: yData 44 }] 45 }); 46 }); 47 }
Highcharts 中有放大功能, 調節橫座標步長,時時數據功能, 請查閱 Highcharts 幫助文檔