highstock的数据格式采用的是[[时间,数据],[时间,数据],[时间,数据],[时间,数据]],而时间采用的是13位的毫秒值,如[1133136000000,69.66],采用的时间格式为UTC(世界标准时间),因此在后台对时间处理时,不能只是简单的转化为毫秒值,如果只是专为毫秒值,在前台的图形上会出现数据线跟时间有错位的现象.只有转化为UTC格式下的毫秒值才不会出现错位.   java下取utc下的毫秒值: Date date = null; DateFormat df = new S…
highchart学习网站 www.highcharts.com http://www.hcharts.cn/docs/index.php http://www.hcharts.cn/api/highstock.php 实现效果: //谷歌手机浏览器酷似有bug,不过在iPhone5上图正确显示 传入数据:股票交易的时间早上9:30-11:30 下午13:00-15:00   对应的最新价.成交量.平均价 请求地址如下:http://open.hundsun.com:8081/quote/v1/…
一直在用 highchart 在做图表,最近一段时间突然接到一活,需要用 highstock 帮客户完成一个股票K线图和分时图.虽然用法和 api上与 highchart 没什么区别,但还是研究一番做出了对应的DEMO,于是抽空与大家分享下. 预期想要达成的效果图 highstock 开发股票或者财经的分时图 准备工作 引入 highstock 文件 [ 这里需要重点注意了,需要引入 highstock 的版本 为 v1.2.5 版本,最新版和老版本有很大的区别,至于为什么随后在代码结束后为大家…
   此文档是本人在开发过程图形报表时使用HighCharts所遇到的问题及解决方案 .最后附上有HighCharts中文帮助文档 HighCharts  版本:Highcharts-3.0.1 HighStock   版本:Highstock-1.3.1 下载地址:http://www.highcharts.com/ xAxis x轴的样式 xAxis: { categories: ['Apples', 'Bananas', 'Oranges']], //X轴数据data abels: {//…
是否可见 $('.btn-accomplish').is(':visible') 通过ajax提交时, {a: vA | ''}; vA没有时,服务器得到的a为"0".如果是两丨,a为空("") | 与 || 的区别 '' | '' = 0 '' | 'a' = 0 '测试' | '测试' = 0 '' | '1' = 1 '2' | '1' = 3 '5' | '3' = 7 '3' | '5' = 7 '' || 'a' = 'a' '测试' || '1' =…
与上一篇文章相比k线图主要的难点 1.tooltip的定制化显示: 当手指触摸手机屏幕上下拖动可能会手指的事件陷入图表无法进行上下拖动 tooltip:{followMouseMove} followMouseMove为true的话手指左右移动框中数据会发生改变但是无法上下移动,false的话图表框可以上下移动但数据无法改变. 所以需要定制化tooltip,当手指上下移动的时候事件不会被捕获,左右移动的时候tooltip中的数据可以跟随变化. var tooltipChart = {// cha…
摘要 记录遇到的一些问题和解决方案 时差 数据容量 多表联动 1. 时差 问题描述 highcharts 默认是标准 UTC 时间,而国内默认是东八区时间,所以会有8个小时的时差 解决方法 使用highcart绘图之前,设置UTC属性为false,例子如下: Highcharts.setOptions({ global: { useUTC: false //关闭UTC } }); 2. 数据容量 问题描述 当我们数据装填过多时,会出现highchart #12 Highcharts expect…
一.路由器部分 //[饼图]统计路由器在线.离线数量 SELECT COUNT(*) AS total, MINUTE)) ELSE NULL END) AS livecount, MINUTE)) ELSE NULL END) AS diecount FROM wifi_routemap 二.Portal Page页面统计部分 //[饼图]访问页面数量,以路由器进行排名 SELECT `ap_mac`, COUNT(`ap_mac`) AS `total` FROM `wifi_status_…
bzoj1062[Noi2008]糖果雨 首先给出的颜色没有用. 估计要用数据结构.而线段难以维护. 考虑把线段变成点 T是单增的. 所以询问的时候,存在的线段都可能贡献答案. 那些线段的位置如果可以统一一下就好了. 发现线段2*len一个循环 思路:把所有的线段移动到l=0 或者说,考虑l=0的时候,时间是多少 横坐标:x=(ti-d*l)%(2*len)(这个时间仅仅为了相对关系表示方便,实际上,这个线段可能根本不会在这个时间出现,不过没有关系) 纵坐标:y=r-l 这样的好处是,线段都是从…
一. JS的简介 JavaScript是一种网页编程技术,经常用于创建动态交互网页 JavaScript是一种基于对象和事件驱动的解释性脚本语言,类似C语言和Java的语法 事先不编译:逐行执行:无需进行严格的变量声明:内置大量现成对象,编写少量程序可以完成目标 不同的浏览器甚至同一浏览器的不同版本对JavaScript的支持程度都不一样 二. JS的基本语法 0. 有两种JavaScript写法: a. 直接在 html 中嵌入,程序写法: <script type="text/java…
关于spinlock 我们在知道什么是spinlock之前,还需要知道为什么需要这个spinlock?spinlock本质就是锁,提到锁,我们就回到了多线程编程的混沌初期,为了实现多线程编程,操作系统引入了锁.通过锁能够保证在多核多线程情况下,对临界区资源进行保护,从而保证操作数据的一致性. 锁 那么我们来温习下操作系统中5个知名的锁概念,每个技术都有适合自己的应用场景,此处引入介绍不再进一步深入展开. 信号量(Semaphore) Linux中的信号量是一种睡眠锁.如有一个任务试图获得一个已被…
InfluxDB 聚合函数实用案例 文章大纲 InfluxDB 简介 InfluxDB是GO语言编写的分布式时间序列化数据库,非常适合对数据(跟随时间变化而变化的数据)的跟踪.监控和分析.在我们的项目中,主要是用来收集设备实时上传的值.从而分析该设备值的趋势图和各个设备的能耗占比等一系列功能.InfluxDB的功能很强大,文档也很详细.可美中不足的是,它的单机性能并不是很理想.因为InfluxDB存储的数据量本身是非常巨大的,在执行一些时间范围比较大的sql语句,耗时会很长,甚至直接崩溃.而开源…
Java Script 基础 一. JS的简介     JavaScript是一种网页编程技术,经常用于创建动态交互网页     JavaScript是一种基于对象和事件驱动的解释性脚本语言,类似C语言和Java的语法     事先不编译:逐行执行:无需进行严格的变量声明:内置大量现成对象,编写少量程序可以完成目标     不同的浏览器甚至同一浏览器的不同版本对JavaScript的支持程度都不一样 二. JS的基本语法    0. 有两种JavaScript写法:       a. 直接在 h…
2020-04-16 14:05:01 --Edit by yangray 按横轴刻度的种类不同,分为数值类刻度和日期类刻度. 数值类刻度 需求:x轴数据间隔为2,显示最后24条数据. #!/usr/bin/python # _*_ Coding: Utf-8 _*_ import random import matplotlib.pyplot as plt xs = [i*2 for i in range(200)] ys = [10 + random.randint(1, 8) for i…
2.横坐标为字符串的代码实例 cell={‘PLS’,’SVM’,’RF’,’NNET’,’NB’,’PLR’,’C5.0′,’PDA’,’KNN’,’GLM’,’BCT’};%分类方法yData=[7.78 7.16 7.75 9.06 1.94 5.47 6.19 3.44 6.38 1.81 9.03];%mean rank值n=size(cell,2);x=1:1:n;plot(x,yData,’k-‘,x,yData,’rs’);ylabel(‘mean rank’);xlabel(‘…
1.在flask-bootstrap的base.html模板中加载highstock.js      以下是base.html的源码中,调用js文件的例子. 文件路径:python2.7/site-packages/flask_bootstrap/templates/bootstrap/base.html      {% block scripts %}     <script src="{{bootstrap_find_resource('jquery.js', cdn='jquery'…
在工作中除了要做一些常用的图表之外,不时还会有一切奇怪图表的制作需求. 今天的内容主要记录的是如何对excle图表的次横坐标及次纵坐标进行调试,以及如何自定义调整轴标签 首先看下如何做次纵坐标,工作中总有两个相关数据但是单位不一致或数量级不一致的状况,这时候要将两组数据整合到一起就要用到次级纵坐标了. 下图为一组购买数据,要将购买人数及购买金额放在一个表格内 首先选中作图数据,然后插入数据图表 选择插入组合图 然后右键图表,选择更改数据图表类型 然后勾选一个数据为次坐标 更改后的数据表 还有一种…
在项目中显示chart时,当横坐标的标签名称过长时,extjs会自动隐藏部分的标签. 我想,如果能让标签斜着,或者纵向显示的话,就能够节省x轴上的长度. 经过在网上查找,解决方案如下. //在表格的axes中添加 label项 axes: [ { ....\\y轴 }, { type: 'Category', position: 'bottom', fields: ['name'], label: { rotate: { degrees: 315} }, title: 'x轴' } ] //la…
参考博客HighCharts/Highstock使用小结,使用汉化及中文帮助文档 参考博客highcharts与highstock实例…
highcharts实例代码 <head> <title>highcharts报表示例</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script type="text/javascript" src="./js/jquery.min.js"></scr…
最近项目要做曲线报表,之前用的是生成图片然后传到前端,感觉不是很好,在网上找到资料说highstock就可以而且还可以做类似股票的那种实时的曲线,研究的一段时间把项目问题解决了做个总结: 首先把highstock.js放到项目资源路径下,因为这个需要JQuery,所以jquery-1.7.2.min.js也需要放,而且在页面引用是要先引用jquery-1.7.2.min.js再引用highstock.js,刚开始做的时候没注意页面加载完后不出图.我做的这个图还需要exporting.js,所以也…
1.问题叙述性说明 一组单选button,有周和月之分,选择"周",柱状图横坐标显示的是周,纵坐标显示的是人数:选择"月",柱状图横坐标显示的月,纵坐标显示的是比率. 2.演示实例 <? xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s=&…
$(function () { $.getJSON('http://www.hcharts.cn/datas/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) { // split the data set into ohlc and volume var ohlc = [], volume = [], dataLength = data.length, // set the allowed units for dat…
获取直线上的点,很容易,那曲线呢?二阶贝塞尔.三阶贝塞尔.多段混合曲线,如何获取指定横坐标对应的纵坐标? 如下图形: 实现方案 曲线上的点集 Geometry提供了一个函数GetFlattenedPathGeometry,可以获取其绘制后显示的多边形. 我们可以通过其Figures -> PathSegment -> Point, public List<Point> GetPointsOnPath(Geometry geometry) { List<Point> po…
使用MATLAB 画柱状图 ,即bar (x,y),其横坐标是默认 1.2.3.4.……的 % --v1 y1=[asum1,asum2,asum3,asum4,asum5,asum6,asum7,asum8,asum9,asum10]; x1=[:]; bar(x1,y1) 现在需要修改横坐标名称,使用命令: % --v2 y2=[asum1,asum2,asum3,asum4,asum5,asum6,asum7,asum8,asum9,asum10]; x2=['<=10','10-25',…
如果你的x轴是时间又是世纪秒的话又按以下设置的话,把xAxis的设置去掉试试看, 因为highstock会对世纪秒自动转换的 // xAxis: {// // max: 23, // min: 0, // labels: {// formatter: function () {// //在空数据情况下// //if (currentA == "") // // var vdate =new Date(currentA[this.value][0]); // console.log(th…
jsp中导入:<script src="<c:url value="/resources/js/highstock.js"></c:url>"></script> jsp页面加入 <div id="historyChart" style="min-width:1050px;height:350px"></div> <div class="t…
K线图,相信每个股民都不陌生,如何用SVG画好一个K线图是一个难题. 我选择用highstock做为画图组件,适当的修改了一下源码,参考了数个财经网站的案例,完成了一个不太成熟的K线图,欢迎大家批评指正. 上图就是整个K线图的样子,图的上半部分是K线图和5日均线,10日均线,30日均线,下半部分是成交量,用柱状图显示,tooltips显示了用户选择点的股票指标,所有颜色符合红涨绿跌的原则. 实现的功能主要有: 1.根据用户选择的时间区间,显示最高价和最低价. 2.点击最高价或最低价的flags会…
vue页面中使用折线图,并且有时间段筛选.因此就需要用到横坐标的拖拽功能. 界面效果如下: 现在来看这个效果的实现代码: drawLine() { let that = this, lineDate = [], dispatchCount = [], finishCount = [], newCount = []; let param = { // 参数 }; axios .post(url, param) .then(function(response) { let rs = response…
最近项目使用到Echarts,所以学习了下 根据API,实现Echarts很简单,在这就不多说了,下面就说说项目中碰到的一些需求 1.由于横坐标很多,导致数据不能展示完整,所以需要设置横坐标样式倾斜展示 2.每个数据列(比如柱形图),顶部需要显示具体数值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv=…