Highcharts 显示图表

时间 2019-12-06

标签 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 帮助文档