highchart编程-.pdf

《highchart编程-.pdf》由会员分享，可在线阅读，更多相关《highchart编程-.pdf（50页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、仪表盘：js 代码：$(function()var colors=#07FD04,#FFFF00,#FF7805,#FA0100,#9E004F,#790222$(#container).highcharts(chart:renderTo:container,type:gauge,plotBorderWidth:1,plotBackgroundColor:/背景色linearGradient:x1:0,y1:0,x2:0,y2:1,stops:0,#FFF4C6,0.3,#FFFFFF,1,#FFF4C6 ,plotBackgroundImage:null,/背景图片 height:210 ,

2、title:text:北京市最近24 小时空气质量指数趋势(AQI),pane:startAngle:-90,endAngle:90,background:null,center:45%,100%,size:300 ,yAxis:/tickLength:0,/minorTickLength:0,min:0,max:500,minorTickPosition:inside,tickPosition:inside,labels:/enabled:false,rotation:auto,distance:10 ,plotBands:/分区段from:0,to:50,color:colors0,inn

3、erRadius:100%,outerRadius:65%,from:50,to:100,color:colors1,innerRadius:100%,outerRadius:65%,from:100,to:150,color:colors2,innerRadius:100%,outerRadius:65%,from:150,to:200,color:colors3,innerRadius:100%,outerRadius:65%,from:200,to:300,color:colors4,innerRadius:100%,outerRadius:65%,from:300,to:500,col

4、or:colors5,innerRadius:100%,outerRadius:65%,title:text:AQI,style:fontSize:14px,marginTop:10px ,y:20 ,exporting:enabled:true ,plotOptions:gauge:dataLabels:enabled:true,y:-20,dial:/仪表盘指针radius:80%,rearLength:0%,backgroundColor:silver,borderColor:silver,borderWidth:1,baseWidth:10,topWidth:1,baseLength:

5、30%,tooltip:formatter:function()var name=;if(this.y=0&this.y 50&this.y 100&this.y 150&this.y 200&this.y 300)name=严重污染;return 北京市最近24 小时空气质量指数趋势(AQI):+this.y+,空气质量状况：+name;,series:name:北京市最近24 小时空气质量指数趋势(AQI),data:150,yAxis:0 ););图形显示：多个 Y 轴的实现方法在于把yAxis 设置成一个数组，里面的一个对象代表一条Y 轴，利用opposite:true 来表示是否跟默

6、认位置相反，默认Y 轴的位置在图形左边，series中通过对每个 series设置 yAxis 来表示使用哪个Y 轴，0 表示第一个，以此类推。画图：$(function()$(#container).highcharts(xAxis:categories:Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec,yAxis:lineWidth:1,title:text:y1 ,title:text:y2,lineWidth:1,opposite:true,title:text:y3,lineWidth:1,opposite:true,series:dat

7、a:1,2,3,4,5,6,7,8,9,name:Right,yAxis:0,data:4,1,5,8,7,10,13,11,11,yAxis:1,name:Center,data:9,10,11,12,13,14,15,16,17,step:left,yAxis:2,name:Left ););图形：台阶图$(function()$(#container).highcharts(title:text:Step line types,with null values in the series,xAxis:categories:Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,S

8、ep,Oct,Nov,Dec,series:data:1,2,3,4,5,6,7,8,9,step:right,/left,right,center,true,默认 false name:Right ););highcharts台阶图(步骤图)(2)多条线$(function()$(#container).highcharts(title:text:Step line types,with null values in the series,xAxis:categories:Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec,series:data:

9、1,2,3,4,5,6,7,8,9,step:right,/left,right,center,true,默认 false name:Right,data:3,7,3,9,1,2,5,4,8,color:red,step:right,/left,right,center,true,默认 false name:Right 如果不想使用UTC 时间的话必须设置useUTC 为 false，如果只是这样还是不起作用，还需要一个步骤，那就是Highcharts.setOptions(global:useUTC:false );这样设置的 false 才会起作用，同时后台传来的时间毫秒值也不加时区，即不

10、使用UTC 时间。这样也就不会出现时间对不上的问题。点击事件点击图例时，线条隐藏同时图例变成白色$(function()$(#container).highcharts(chart:,legend:itemHiddenStyle:color:white ,xAxis:categories:Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec,plotOptions:series:events:legendItemClick:function(event)alert(点击了：+this.name),series:name:Tokyo,data:7.0,6

11、.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6,name:New York,data:-0.2,0.8,5.7,11.3,17.0,22.0,24.8,24.1,20.1,14.1,8.6,2.5,name:Berlin,data:-0.9,0.6,3.5,8.4,13.5,17.0,18.6,17.9,14.3,9.0,3.9,1.0,name:London,data:3.9,4.2,5.7,8.5,11.9,15.2,17.0,16.6,14.2,10.3,6.6,4.8 );chart=$(#container).highcharts

12、();如果要屏蔽图例的点击事件，也就是点击时没反应。plotOptions:series:events:legendItemClick:function(event)return false 点击时 return false 就可以了点击图例时把数据删除$(function()$(#container).highcharts(chart:,legend:itemHiddenStyle:color:white ,xAxis:categories:Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec,plotOptions:series:events:le

13、gendItemClick:function(event)for(var i=0;i chart.series.length;i+)if(this.name=chart.seriesi.name)chart.seriesi.remove();break;,series:name:Tokyo,data:7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6,name:New York,data:-0.2,0.8,5.7,11.3,17.0,22.0,24.8,24.1,20.1,14.1,8.6,2.5,name:Berlin,data:-

14、0.9,0.6,3.5,8.4,13.5,17.0,18.6,17.9,14.3,9.0,3.9,1.0,name:London,data:3.9,4.2,5.7,8.5,11.9,15.2,17.0,16.6,14.2,10.3,6.6,4.8 );chart=$(#container).highcharts(););（1）首先、无论是 highcharts还是 highstock,chart.options.series表示的是图形的主要显示部分，个数是多少就有几条线，(饼图除外，跟这个不一样)，所以如果要对 series进行操作的话，可以通过chart.options.series的操作

15、来完成。（2）另外对 series的操作也可以通过chart.series来完成。如果是highcharts的话操作跟上面一样，如果是highstock的话，需要注意，chart.series可能会包含图形下面navigator的图形，也就是 chart.series的个数比 chart.options.series的个数多 1，这时对 chart.series操作需要把navigator考虑进去，以免发生错误。如果 highstock画柱形图的话，跟（1）一样操作就可以，如果是line或者其他图形的时候，chart.series个数比 chart.options.series多 1 例如：c

16、hart.seriesi.name=chart.opions.seriesi.name/如果后面这个设置 name属性chart.seriesi.data=chart.options.seriesi.data 个人推荐使用第二种：chart.series(个人想法)如果是饼图的话：使用chart.options.series0.data来获取饼图各部分的信息，或者 chart.series0.points来获取饼图各部分的信息关于 highcharts画的圆的引导线(2013-03-14 17:24:28)转载标签：highcharts 圆引导线分类：highcharts$(function(

17、)var chart=new Highcharts.Chart(chart:renderTo:container,type:pie,plotOptions:pie:dataLabels:distance:30,/控制引导线的长度color:red ,series:data:Firefox,44.2,IE7,26.6,IE6,20,Chrome,3.1,Other,5.4 ););highcharts 作出的图上进行一些操作后，即进行renderer操作时，不处理直接导出图片时，如果采用 highcharts自带的导出方法导出来的图片不会包含这些操作，这时候我们就需要自己实现它的导出方法，以便达

18、到我们的要求。这时候需要自己写Highcharts.getSVG方法和 Highcharts.exportCharts方法，从而达到要求。highcharts跟后台交互的demo(2012-11-19 14:17:43)转载标签：highchart 后台交互demo highcharts后台分类：highcharts 杂谈很多人都不知道highcharts 跟后台如何进行交互，在此写了个小demo，一个 servlet，一个 jsp 页面，servlet 用来往 jsp 页面输出数据，我这里的后台数据是随便写的，你可以根据需要改成自己需要的数据。我这里的servlet 往前台传的数据是字符串，

19、然后在前台用js 处理成 json 对象的，也可以往前台直接传json 对象，我这里为了简单起见采用输出字符串。不多说了上代码：servlet：package com.highcharts.servlet;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import java.util.Set;import javax.servlet.Servle

20、tException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;WebServlet(name=lineServlet,urlPatterns=/lineServlet)public class LineServlet extends HttpServlet private static fina

21、l long serialVersionUID=366512729238484827L;Override protected void doGet(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException /TODO Auto-generated method stub this.doPost(req,resp);Override protected void doPost(HttpServletRequest request,HttpServletResponse response)

22、throws ServletException,IOException PrintWriter out=response.getWriter();List data=new ArrayList();for(int i=1;i 10;i+)data.add(i);List ll=new ArrayList();for(int i=0;i 10;i+)ll.add(data+i+);String str=;str+=title:this is demo,data:+data+,xAxis:+ll+;out.println(str.toString();out.flush();out.close()

23、;jsp：Insert title here$(document).ready(function()$.ajax(url:lineServlet,type:GET,success:function(data)console.debug(data)var a=eval_r(+data+);console.debug(a);var chart=new Highcharts.Chart(chart:renderTo:container,xAxis:categories:a.xAxis,title:text:a.title,tooltip:formatter:function()return+this

24、.series.name+this.x+:+this.y;,plotOptions:,series:data:a.data );););highchart图坐标轴及背景的一些设置(2012-10-26 17:37:06)转载标签：highcharts 坐标轴背景杂谈分类：highcharts$(function()var chart=new Highcharts.Chart(chart:renderTo:container ,xAxis:categories:Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec,tickLength:20,/横坐标各个

25、名称间的竖线，例如Jan 和 Feb 间的竖线 lineWidth:1/X轴的宽度 ,yAxis:gridLineWidth:1,/图形的背景线设置 lineWidth:1,/Y轴的宽度 minorTickInterval:auto,/这个是前提，要使用minorTickLength和minorTickWidth的话 minorTickLength:10,minorTickWidth:1 ,series:data:29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4 ););效果图如下：highcharts简介(

26、2012-10-25 11:09:08)转载 标签：杂谈分类：highcharts 2012年 10 月 25 日Highcharts 是一个用纯JavaScript编写的一个图表库,能够很简单便捷的在web 网站或是web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。HighCharts 界面美观，由于使用JavaScript 编写，所以不需要像Flash 和 Java那样需要插件才可以运行，而且运行速度快。另外HighCharts 还有很好的兼容性，能够完美支持当前

27、大多数浏览器。highcharts官网：http:/ options=chart:,/图的基本信息设置title:,/主标题subtitle:,/副标题xAxis:,/对 x 轴的一些设置yAxis:,/对 y 轴的一些设置plotOptions:,tooltip:,/loading:,labels:,pane:,navigation:,/导出和下载图片的下拉菜单设置credits:,/网站信息默认 H legend:,exporting:,/导出和下载功能按钮navigator:,rangeSelector:,/范围选择highchartstock 下的scrollbar:,/highcha

28、rtstock下的滚动条lang:,/汉化colors:,/设置颜色series:;java 代码实现提醒(2011-07-26 09:35:15)转载标签：java 代码提醒it 分类：Java List list=new ArrayList();Calendar cal=Calendar.getInstance();Calendar cal1=Calendar.getInstance();Date date=new Date();cal.setTime(date);/今天的日期Date customerDate=customerList.get(i).getBirth();if(null!

29、=customerDate)cal1.setTime(customerDate);/数据库客户生日/月份相同时if(cal.get(Calendar.MONTH)=cal1.get(Calendar.MONTH)/跟你设置的天数进行比较if(cal1.get(Calendar.DAY_OF_MONTH)-cal.get(Calendar.DAY_OF_MONTH)=0)list.add(customerList.get(i);else if(cal1.get(Calendar.MONTH)-cal.get(Calendar.MONTH)=1)|(cal.get(Calendar.MONTH)-

30、cal1.get(Calendar.MONTH)=11)/月份不同，分两种情况1、1-12 月这种2、12 月到 1月if(cal.getActualMaximum(Calendar.DAY_OF_MONTH)-cal.get(Calendar.DAY_OF_MONTH)+cal1.get(Calendar.DAY_OF_MONTH)=5)for(i;i datai)min=datai;else if(i0)var a=i+4;for(i-1;i datai-1)min=datai-1;else var a=i+5;for(i;i datai)min=datai;chart.yAxis0.se

31、tExtremes(min);,xAxis:,series:data:data ););动态修改 y 轴最小值主要是在events 下的 selection 中调用 setExtremes()方法可以实现动态更改 Y轴最小值，从而使小范围的波动看起来更加明显效果如图所示：highchart生成多 Y 轴的图(2012-10-26 15:28:06)转载标签：highcharts 多个 y 轴杂谈分类：highcharts$(function()$(document).ready(function()chart=new Highcharts.Chart(chart:renderTo:contai

32、ner ,xAxis:categories:Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec ,yAxis:/第一个 Y 轴 labels:/刻度 formatter:function()return this.value+C;,style:color:#89A54E ,title:/y轴名称 text:Temperature,style:color:#89A54E ,/第二个 Y 轴 title:text:Rainfall,style:color:#4572A7 ,labels:formatter:function()return this.va

33、lue+mm;,style:color:#4572A7 ,opposite:true/表示是否跟第一个在反方向位置 ,series:type:column,yAxis:1,/用来指定数据对应的y 轴，不写表示默认选择第一个y 轴 data:49.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4 ,type:column,data:7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6 );););需要几个 Y 轴即在 yAxis下写几个对象，同时在series

34、中指定每个数据对应的Y 轴效果图：一条直线多种颜色(1)(2013-03-14 16:11:59)转载 标签：highcharts 多颜色line 分类：highcharts 这是第一种方法：原理：把需要用的所有颜色放到一个数组中，遍历该数组，对要使用的数据（可以是后台传来的）进行分化，分别放到不同的series 中，即所有颜色针对的不同的数据，比如data:null,null,23,45,data:22,null,null,null,22,比如第一个数据属于series1，而第二个不属于，那么第二个数据也要加到series1 中。这样产生的series 个数跟你需要的颜色的个数是相同的，le

35、gend 直接显示就可以了。html 部分:生成图形的部分：$(function()var data=230,278,32,50,104,44,170,249,282,238,117,58,161,167;var categories=2 月 27 日,2 月 28 日,3 月 1 日,3 月 2 日,3 月 3 日,3 月 4 日,3 月 5 日,3月 6 日,3 月 7 日,3 月 8 日,3 月 9 日,3 月 10 日,3 月 11 日,3 月 12 日 var colors=#07FD04,#FFFF00,#FF7805,#FA0100,#9E004F,#790222 var tem

36、p=0,50,100,150,200,300,500 var seriess=;var dat=;for(var a=0;a colors.length-1;a+)dat=new Array();var i=0;for(var b=0;b tempa&datab tempa+1|datab+1 if(i!=0)dat.push(datab)else dat.push(null)i=0;var name=;switch(a)case 0:name=优;break;case 1:name=良;break;case 2:name=轻度污染;break;case 3:name=中度污染;break;c

37、ase 4:name=重度污染;break;case 5:name=严重污染;break;seriess.push(name:name,color:colorsa,data:dat);var chart2=new Highcharts.Chart(chart:renderTo:container2,type:line,xAxis:/categories:categories,labels:formatter:function()return categoriesthis.value;,gridLineWidth:1,yAxis:title:text:空气质量指数(AQI),y:-20,star

38、tOnTick:true,plotLines:color:#5fa7f7,width:2,value:100,label:align:left,text:良(限值),style:color:#5fa7f7,x:0 ,title:text:北京市最近两周空气质量指数趋势(AQI),legend:enabled:true,backgroundColor:#FFFFFF,tooltip:borderColor:gray,formatter:function()return categoriesthis.x+:+this.y;,exporting:enabled:true,plotOptions:se

39、ries:dataLabels:enabled:true,borderRadius:5,backgroundColor:#edfad6,borderWidth:1,borderColor:#07FD04,y:-6,marker:fillColor:#FFFFFF,lineWidth:2,lineColor:null,symbol:circle,states:hover:enabled:false ,events:legendItemClick:function(event)return false;,series:seriess););结果如下：一条直线多种颜色(2)(2013-03-14 1

40、6:35:48)转载 标签：highcharts 多颜色line 一条直线多种颜色分类：highcharts 这是第二种生成一条直线有多种颜色的方法，跟第一种方法大同小异。根据数据来生成series，series 的个数是数据的个数-1.但是这种方法下不能让legend 显示了，要不然会产生相反的效果。采用 renderer.rect 来生成类似legend 的部分。html 部分 画图部分$(function()var data=230,278,32,50,104,44,170,249,282,238,117,58,161,167;var categories=2 月 27 日,2 月 28

41、 日,3 月 1 日,3 月 2 日,3 月 3 日,3 月 4 日,3 月 5 日,3月 6 日,3 月 7 日,3 月 8 日,3 月 9 日,3 月 10 日,3 月 11 日,3 月 12 日 var colors=#07FD04,#FFFF00,#FF7805,#FA0100,#9E004F,#790222 var temp=0,50,100,150,200,300,500 var series=;var dat=;for(var a=0;a data.length-1;a+)var datas=;var color=;if(dataa=50)color=colors0 else i

42、f(dataa 50)color=colors1 else if(dataa 100)color=colors2 else if(dataa 150)color=colors3 else if(dataa 200)color=colors4 else if(dataa 300)color=colors5 for(var b=0;b a;b+)datas.push(null);datas.push(dataa);datas.push(dataa+1);series.push(color:color,data:datas)var chart=new Highcharts.Chart(chart:r

43、enderTo:container,type:line,events:load:function(event)/颜色框for(var a=0;a 6;a+)var name=;switch(a)case 0:name=优：;break;case 1:name=良：;break;case 2:name=轻度污染：;break;case 3:name=中度污染：;break;case 4:name=重度污染：;break;case 5:name=严重污染：;break;this.renderer.text(name,a2?(38+a*100-10):(38+a*100-55),398).attr(

44、rotation:0 ).css(color:#4572A7,fontSize:14px ).add();this.renderer.rect(40+a*100),390,30,10,1).attr(stroke-width:0,stroke:colorsa,fill:colorsa,zIndex:3).add();,credits:enabled:false,xAxis:/categories:categories,labels:formatter:function()return categoriesthis.value;,gridLineWidth:1,yAxis:title:text:

45、空气质量指数(AQI),y:-20,startOnTick:true,plotLines:color:#5fa7f7,width:2,value:100,label:align:left,text:良(限值),style:color:#5fa7f7,x:0 ,title:text:北京市最近两周空气质量指数趋势(AQI),legend:enabled:false,tooltip:borderColor:gray,formatter:function()return categoriesthis.x+:+this.y;,exporting:enabled:true,plotOptions:ser

46、ies:dataLabels:enabled:true,borderRadius:5,backgroundColor:#edfad6,borderWidth:1,borderColor:#07FD04,y:-6,marker:fillColor:#FFFFFF,lineWidth:2,lineColor:null,symbol:circle,states:hover:enabled:false ,events:legendItemClick:function(event)return false;,series:series););结果如下：一条直线多种颜色(3)(2013-03-14 16:

47、45:59)转载标签：分类：highcharts highcharts line 多颜色画图一条直线多种颜色这不是第3 种画图的方法，而是简单的说明一下图形是怎么画出来的。1、数据格式为data:11,null,null,12,34 的效果为：2、多个 series就会产生一条直线不同颜色的样式了 data:29.9,null,106.4,129.2,null,176.0,135.6,null,216.4,194.1,95.6,54.4 data:29.9,35,106.4,129.2,88,176.0,135.6,80,216.4 关于 highstock横坐标的一些的一些说明(1)使用 U

48、TC 时间(2012-11-26 16:59:38)转载标签：highcharts highstock 时间错位highstock数据格式杂谈分类：highcharts highstock 的数据格式采用的是时间,数据,时间,数据,时间,数据,时间,数据,而时间采用的是 13 位的毫秒值，如1133136000000,69.66，采用的时间格式为UTC（世界标准时间），因此在后台对时间处理时，不能只是简单的转化为毫秒值，如果只是专为毫秒值，在前台的图形上会出现数据线跟时间有错位的现象。只有转化为UTC格式下的毫秒值才不会出现错位。java下取 utc 下的毫秒值：Date date=null;

49、DateFormat df=new SimpleDateFormat(yyyy-MM-dd);date=df.parse(2012-11-26);Calendar cal=Calendar.getInstance(TimeZone.getDefault();/TimeZone.getDefault()获取主机的默认TimeZone，即时区偏移量。cal.setTime(date);list.add(date.getTime()+cal.getTimeZone().getRawOffset();/cal.getTimeZone().getRawOffset()是相对 utc 的偏移量/date.getTime()+cal.getTimeZone().getRawOffset()就是 2012-11-26 对应的 utc 下的毫秒值非 UTC格式毫秒UTC格式毫秒