Highcharts 顯示圖表

引用文件 <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 幫助文檔  
相關文章
相關標籤/搜索