引用文件 <head> 部分

<script src="../../static/js/Highcharts-3.0.5/js/highcharts.js"></script>

<script>

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

转载于:https://www.cnblogs.com/lcmemo/p/6410174.html

Highcharts 显示图表相关推荐

  1. VTK:在3DScene显示图表用法实战

    VTK:在3DScene显示图表用法实战 程序输出 程序完整源代码 程序输出 程序完整源代码 #include <vtkActor.h> #include <vtkCamera.h& ...

  2. pyCharm pyplot.show()不显示图表的解决

    现象: import pandas as pd from numpy import * import matplotlib.pyplot as plt import matplotlib as mpl ...

  3. 工控软件IFIX加入WEB显示图表

    工控软件IFIX如何加入WEB并显示图表 1.效果展示 2.编写HTML测试代码 其中echarts.js需要自行下载 https://cdn.staticfile.org/echarts/4.7.0 ...

  4. excel怎么不显示图表上显示为0%的项?

    如何不显示图表中0%的项 相信许多小伙伴不想让图表中为0%的项显示(毕竟大多数情况下没有太多意义)那如何不显示呢?废话不多说(这是龚春红老师教我的) 上图片 这里图表0%的没必要显示,我们可以添加一行 ...

  5. Tableau工具提示:显示图表

    Tableau工具提示可以显示鼠标划过处的详细信息或说明,提高数据的可读性.工具提示中可以插入参数.字段等以显示文字说明信息,还可以插入工作表来显示图表,下面基于"示例-超市"数据 ...

  6. pyecharts+Vue在显示图表

    pyechart pyecharts是与python对接的,一个用于生成 Echarts 图表的类库. 为什么用pycharts 说到vue中加图表,大部门肯定是用echarts.我用pyechart ...

  7. (jQuery,Highcharts)前端图表系列之一 --Highcharts (转)

    转自:http://www.cnblogs.com/gxll1314/archive/2010/10/11/1847770.html 做为系统开发应用不可缺少的部分,图表可以使系统分析看起来更直观,也 ...

  8. 数据呈现图表插件Highcharts介绍+图表联动案例

    由于项目需要,学习并使用了Highcharts图表插件,这是一款功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库插件. Highcharts简介 下边的介绍来自Highcharts中文 ...

  9. react native使用百度echarts显示图表

    echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表.公司项目做h5项目用了不少,最近公司翻新h5页面,用react-native改造,来达到增强用户体验效果的目的.项目中遇到了一些 ...

最新文章

  1. minicom的使用,发送AT指令
  2. damage framework can be used by economics
  3. 转:WEB前端性能优化规则
  4. linux机器设置密码,Linux系统设置复杂安全的密码的办法
  5. 属性拼接转换成字符串_使用一些可选的将字符串配置属性转换为其他类型
  6. 【Flink】TableException: A raw type backed by type information has no serializable
  7. Java普通工程转换成标准的maven工程
  8. 10安装报错0x8007000d_windows10:MySQL8.0.22版本安装教程
  9. ubuntu 修改ip后,老ip仍然存在的问题
  10. 以前是传xml的吗_关于XML:新手入门.
  11. php 7中文手册pdf版,手册的格式 - PHP 7 中文文档
  12. C++ 高效位运算函数 之 __builtin_
  13. Java如何设置word中某段文字的字体/段落样式
  14. AI 编程助手 亚马逊CodeWhisperer使用简介
  15. ssl.SSLError: [SSL: WRONG_VERSION_NUMBER] wrong version number
  16. tl494c封装区别_TL494ING4
  17. 图像特征之SUSAN角点检测
  18. python如何识别特殊字符_如何判断特殊字符?,Python交流,技术交流区,鱼C论坛 - Powered by Discuz!...
  19. WPF--DataGrid控件使用
  20. 历史上最牛的演讲—甲骨文总裁拉里埃里森在耶鲁大学的演讲

热门文章

  1. 腾讯云mysql升级失败怎么办_本地连接腾讯云Mysql失败问题
  2. mac netbeans java_在macOS上不安装JDK的情况下安装Netbeans
  3. MySQL sleep函数使用详解
  4. echarts画图实例讲解
  5. 指令汇B新闻客户端开发(四) 自动轮播条
  6. Andriod开发前准备
  7. 如何查看sql2005数据库的端口号
  8. Mysql-5.5.3 主从同步不支持master-host问题的解决办法
  9. 《越狱》完结 米帅迷应小心纹身网站挂马
  10. 《如何更改其他程序ListView控件中某个Item的内容》