highcharts绘图,怎么从后台数据库管理员要学什么中获取数据

我从后台取到数据用highchart绘图后,發现y轴的值和提示框tooltip中显示的都是正确的但x轴的时间没有正确显示,显示的是

这个问题花了我将近一天的时间,才解决了

查了很多博客,但是没有具体说到怎么解决我看到最可靠的回答说是series中data的封装不正确。

但是我从后台取到的数据是json格式的在javascript中,data是ajax取到的数据

后来仔细看了series封装格式,发现要用Date.UTC这个函数

就改了上面for循环中的代码,


经过上述改动后x轴显示了正确的时间格式。

用Highcharts画图时经常需要更新所画的圖表,最常见的就是改变数据以更新图表在Highcarts中,数据对应的参数是series这儿就以图1的柱状图为例,列举如何更新series的5种方法以供参考。源玳码可从访问


Highcarts图表中,可以有多个series当我们想更新其中某一个series时,可以直接调用其update方法效果如图2所示。

如果想一次性更新多个series那么僦可以直接使用chart.update。除了series其他参数也可以同时进行更新。要注意的是chart.update只允许更新原来的series,不允许新增series比如在这个例子里,只能更新原來的一个或两个series哪怕多加series,也不会起作用效果如图3所示。

如果想要新增series就得使用chart.addSeries了。一次只能加一个series注意这个方法有性能问题,當series的长度很长 且一次性加好多series的时候,图表的反应会很慢效果如图4所示。

当我想完全替换原来的series而不仅仅是在上面做更新和新增的時候,可以采用series.remove和chart.addSeries结合的方法也就是说,要先去掉所有原来的series再逐个加入新的。同样这个方法有性能问题。效果如图5所示


第4种方法由于使用了chart.addSeries,导致性能上可能会出现问题这儿就用一种替换的方法来实现同样的效果。关键就是要比较原来series的数目和新的series的数目当兩个数目不同时,通过series.remove或者chart.addSeries使其相等再统一调用一次chart.update实现图表的更新。源代码如下当新的series数目大于原来的时候,效果如图6所示

版权声明:本文为博主原创文章欢迎转载,请保留原文出处 /zhaizu/article/details/

Highcharts 中默认开启了UTC(世界标准时间),由于中国所在时区为+8所以经过 Highcharts 的处理后会减去8个小时。

如果不想使用 UTC有2种方法可供使用:

1、在使用Highcharts的页面中添加如下代码:

————————————————————————————————————————————————————————————————

这是本人正在维护的一个关于眼睛护理的微信公众账号,专注学生和IT白領人群免费发布实用有趣的护眼知识,欢迎关注

我要回帖

更多关于 数据库管理员要学什么 的文章

 

随机推荐