preparation

Highcharts

Highcharts是一个制作图表的纯Javascript类库，主要特性如下：

兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；

对个人用户完全免费；

纯JS，无BS；

支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；

跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；

提示功能：鼠标移动到图表的某一点上有提示信息；

放大功能：选中图表部分放大，近距离观察图表；

易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；

时间轴：可以精确到毫秒

下载插件

Highcharts下载地址

jquery下载地址

开发环境：

System：xp JDK:1.5 Tomcat：5.X Myeclipse：6.5

jquery：jquery-1.6.3.min.js

highcharts：Highcharts-2.1.9

项目环境：

注：红色的地方即为本次介绍需要的文件部分。

start

代码如下：

本次介绍是把highcharts中的第一个文件拷贝过来，然后把其他的功能加在了这个文件中，然后查询相关资料，解决了链接以及打印导出等。

highcharts1.html            
               Highcharts Example---基本的曲线图

result

访问的url如下：

以下做几点说明：

（1）去掉或更改图片右下角的链接

在highcharts.js文件中搜索credits字符串，找到如下的字符串，

enabled:设置是否显示链接

text：设置链接显示的名称

href：设置链接的url

（2）去掉图片右上角的打印及导出按钮

在js中设置以下代码：

exporting:{

enabled:true //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示

（3）点击图片左边的以下文字，当一次单击会隐藏某一条曲线，再次单击会显示该条曲线

转自http://www.cnblogs.com/java-pan/archive/2011/12/31/highcharts.html

本人实例

function sc_zst() {            var temptick = null;            var tempformat = '%Y-%m';            $(function() {
                          $('#container').highcharts({                        data: {                            csv:"'未知',楼盘价格 1/12/2015,01/1/2016,321001/2/2016,01/3/2016,01/4/2016,01/5/2016,01/6/2016,01/7/2016,01/8/2016,01/9/2016,01/10/2016,01/11/2016,0

"                        },                        title: {                        text: '<%=GetBMName(bmbh) %>'                        },                        subtitle: {                            text: '部门业绩走势图'                        },                        credits: { enabled: false },                        xAxis: {                            type: 'datetime',                            //minTickInterval: 3600 * 24 * 30 * 1000, //time in milliseconds                            tickInterval: temptick, // one week                            dateTimeLabelFormats:                {                    month: tempformat                },                            tickWidth: 0,                            gridLineWidth: 1,                            labels: {                                align: 'left',                                x: 3,                                y: -3                            }                        },                        yAxis: [{ // left y axis                            title: {                                text: null                            },                            labels: {                                align: 'left',                                x: 3,                                y: 16,                                format: '{value:.,0f}'                            },                            showFirstLabel: false                        }, { // right y axis                            linkedTo: 0,                            gridLineWidth: 0,                            opposite: true,                            title: {                                text: null                            },                            labels: {                                align: 'right',                                x: -3,                                y: 16,                                format: '{value:.,0f}'                            },                            showFirstLabel: false}],                            legend: {                                align: 'left',                                verticalAlign: 'top',                                y: 20,                                floating: true,                                borderWidth: 0                            },                            tooltip: {                                crosshairs: true,                                shared: true                            },                            plotOptions: {                                spline: {                                    marker: {                                        radius: 4,                                        lineColor: '#666666',                                        lineWidth: 1                                    }                                }                            },                            plotOptions: {                                series: {                                    cursor: 'pointer',                                    point: {                                        events: {                                            click: function(e) {                                                hs.htmlExpand(null, {                                                    pageOrigin: {                                                        x: e.pageX || e.clientX,                                                        y: e.pageY || e.clientY                                                    },                                                    headingText: this.series.name,                                                    maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':
 ' +                                        this.y + ' visits',                                                    width: 200                                                });                                            }                                        }                                    },                                    marker: {                                        lineWidth: 1                                    }                                }                            },                            series: [{                                name: 'All visits',                                lineWidth: 4,                                marker: {                                    radius: 4                                }}]                            });                    });                }

(function(g){
     typeof module==="object"&&module.exports?module.exports=g:g(Highcharts)})(function(g){
     var u=g.win.document,j=g.each,v=g.pick,r=g.inArray,s=g.isNumber,w=g.splat,k,p=function(b,a){
     this.init(b,a)};g.extend(p.prototype,{init:function(b,a){
     this.options=b;this.chartOptions=a;this.columns=b.columns||this.rowsToColumns(b.rows)||[];this.firstRowAsNames=v(b.firstRowAsNames,!0);this.decimalRegex=b.decimalPoint&&RegExp("^(-?[0-9]+)"+b.decimalPoint+"([0-9]+)$");this.rawColumns=[];this.columns.length?this.dataFound():(this.parseCSV(),this.parseTable(),this.parseGoogleSpreadsheet())},getColumnDistribution:function(){
     var b=this.chartOptions,a=this.options,e=[],f=function(b){
     return(g.seriesTypes[b||"line"].prototype.pointArrayMap||[0]).length},d=b&&b.chart&&b.chart.type,c=[],h=[],q=0,i;j(b&&b.series||[],function(b){c.push(f(b.type||d))});j(a&&a.seriesMapping||[],function(b){e.push(b.x||0)});e.length===0&&e.push(0);j(a&&a.seriesMapping||[],function(a){
     var e=new k,o,n=c[q]||f(d),m=g.seriesTypes[((b&&b.series||[])[q]||{}).type||d||"line"].prototype.pointArrayMap||["y"];e.addColumnReader(a.x,"x");for(o in a)a.hasOwnProperty(o)&&o!=="x"&&e.addColumnReader(a[o],o);for(i=0;i
       
        =d&&e<=c&&!x&&g!==""&&(g=a.split(i),j(g,function(b,a){a>=h&&a<=q&&(f[a-h]||(f[a-h]=[]),f[a-h][t]=b)}),t+=1)}),this.dataFound())},parseTable:function(){
     var b=this.options,a=b.table,e=this.columns,f=b.startRow||0,d=b.endRow||Number.MAX_VALUE,c=b.startColumn||0,h=b.endColumn||Number.MAX_VALUE;a&&(typeof a==="string"&&(a=u.getElementById(a)),j(a.getElementsByTagName("tr"),function(b,a){a>=f&&a<=d&&j(b.children,function(b,d){
     if((b.tagName==="TD"||b.tagName==="TH")&&d>=c&&d<=h)e[d-c]||(e[d-c]=[]),e[d-c][a-f]=b.innerHTML})}),this.dataFound())},parseGoogleSpreadsheet:function(){
     var b=this,a=this.options,e=a.googleSpreadsheetKey,f=this.columns,d=a.startRow||0,c=a.endRow||Number.MAX_VALUE,h=a.startColumn||0,g=a.endColumn||Number.MAX_VALUE,i,j;e&&jQuery.ajax({dataType:"json",url:"https://spreadsheets.google.com/feeds/cells/"+e+"/"+(a.googleSpreadsheetWorksheet||"od6")+"/public/values?alt=json-in-script&callback=?",error:a.error,success:function(a){
     var a=a.feed.entry,e,n=a.length,m=0,k=0,l;for(l=0;l
        
         
          =h&&l<=g)f[l-h]=[],f[l-h].length=Math.min(k,c-d);for(l=0;l
          
           =h&&j<=g&&i>=d&&i<=c)f[j-h][i-d]=e.content.$t;b.dataFound()}})},trim:function(b,a){
     typeof b==="string"&&(b=b.replace(/^\s+|\s+$/g,""),a&&/^[0-9\s]+$/.test(b)&&(b=b.replace(/\s/g,"")),this.decimalRegex&&(b=b.replace(this.decimalRegex,"$1.$2")));return b},parseTypes:function(){
     for(var b=this.columns,a=b.length;a--;)this.parseColumn(b[a],a)},parseColumn:function(b,a){
     var e=this.rawColumns,f=this.columns,d=b.length,c,h,g,i,j=this.firstRowAsNames,k=r(a,this.valueCount.xColumns)!==-1,o=[],n=this.chartOptions,m,p=(this.options.columnTypes||[])[a],n=k&&(n&&n.xAxis&&w(n.xAxis)[0].type==="category"||p==="string");for(e[a]||(e[a]=[]);d--;)if(c=o[d]||b[d],g=this.trim(c),i=this.trim(c,!0),h=parseFloat(i),e[a][d]===void 0&&(e[a][d]=g),n||d===0&&j)b[d]=g;else if(+i===h)b[d]=h,h>31536E6&&p!=="float"?b.isDatetime=!0:b.isNumeric=!0,b[d+1]!==void 0&&(m=h>b[d+1]);else if(h=this.parseDate(c),k&&s(h)&&p!=="float"){
     if(o[d]=c,b[d]=h,b.isDatetime=!0,b[d+1]!==void 0){c=h>b[d+1];if(c!==m&&m!==void 0)this.alternativeFormat?(this.dateFormat=this.alternativeFormat,d=b.length,this.alternativeFormat=this.dateFormats[this.dateFormat].alternative):b.unsorted=!0;m=c}}else if(b[d]=g===""?null:g,d!==0&&(b.isDatetime||b.isNumeric))b.mixed=!0;k&&b.mixed&&(f[a]=e[a]);if(k&&m&&this.options.sort)for(a=0;a
           
            0;){i=new k;i.addColumnReader(0,"x");c=r(0,d);c!==-1&&d.splice(c,1);for(c=0;c
            
             0&&g[0].readers.length>0&&(i=b[g[0].readers[0].columnIndex],i!==void 0&&(i.isDatetime?a="datetime":i.isNumeric||(a="category")));if(a==="category")for(c=0;c
             
              
               
                
                 =2&&(d=this.getReferencedColumnIndexes(),d.length>=2))d.shift(),d.sort(),this.name=b[d.shift()].name;return f};k.prototype.addColumnReader=function(b,a){ this.readers.push({columnIndex:b,configName:a});if(!(a==="x"||a==="y"||a===void 0))this.pointIsArray=!1};k.prototype.getReferencedColumnIndexes=function(){ var b,a=[],e;for(b=0;b

/* Highcharts JS v4.2.5 (2016-05-06) Exporting module (c) 2010-2016 Torstein Honsi License: www.highcharts.com/license*/(function(f){
     typeof module==="object"&&module.exports?module.exports=f:f(Highcharts)})(function(f){
     var t=f.win,k=t.document,C=f.Chart,v=f.addEvent,D=f.removeEvent,E=f.fireEvent,s=f.createElement,u=f.discardElement,x=f.css,l=f.merge,q=f.each,r=f.extend,F=f.splat,G=Math.max,H=f.isTouchDevice,I=f.Renderer.prototype.symbols,A=f.getOptions(),B;r(A.lang,{printChart:"Print chart",downloadPNG:"Download PNG image",downloadJPEG:"Download JPEG image",downloadPDF:"Download PDF document",downloadSVG:"Download SVG vector image",contextButtonTitle:"Chart context menu"});A.navigation={menuStyle:{border:"1px solid #A0A0A0",background:"#FFFFFF",padding:"5px 0"},menuItemStyle:{padding:"0 10px",background:"none",color:"#303030",fontSize:H?"14px":"11px"},menuItemHoverStyle:{background:"#4572A5",color:"#FFFFFF"},buttonOptions:{symbolFill:"#E0E0E0",symbolSize:14,symbolStroke:"#666",symbolStrokeWidth:3,symbolX:12.5,symbolY:10.5,align:"right",buttonSpacing:3,height:22,theme:{fill:"white",stroke:"none"},verticalAlign:"top",width:24}};A.exporting={type:"image/png",url:"http://export.highcharts.com/",printMaxWidth:780,buttons:{contextButton:{menuClassName:"highcharts-contextmenu",symbol:"menu",_titleKey:"contextButtonTitle",menuItems:[{textKey:"printChart",onclick:function(){
     this.print()}},{separator:!0},{textKey:"downloadPNG",onclick:function(){
     this.exportChart()}},{textKey:"downloadJPEG",onclick:function(){
     this.exportChart({type:"image/jpeg"})}},{textKey:"downloadPDF",onclick:function(){
     this.exportChart({type:"application/pdf"})}},{textKey:"downloadSVG",onclick:function(){
     this.exportChart({type:"image/svg+xml"})}}]}}};f.post=function(a,b,e){
     var c,a=s("form",l({method:"post",action:a,enctype:"multipart/form-data"},e),{display:"none"},k.body);for(c in b)s("input",{type:"hidden",name:c,value:b[c]},null,a);a.submit();u(a)};r(C.prototype,{sanitizeSVG:function(a){
     return a.replace(/zIndex="[^"]+"/g,"").replace(/isShadow="[^"]+"/g,"").replace(/symbolName="[^"]+"/g,"").replace(/jQuery[0-9]+="[^"]+"/g,"").replace(/url\([^#]+#/g,"url(#").replace(/
       
        <\/svg>.*?$/,"
       ").replace(/(fill|stroke)="rgba\(([ 0-9]+,[ 0-9]+,[ 0-9]+),([ 0-9\.]+)\)"/g,'$1="rgb($2)" $1-opacity="$3"').replace(/ /g,"\u00a0").replace(//g,"\u00ad").replace(/<(\/?)TITLE>/g,"<$1title>").replace(/height=([^" ]+)/g,'height="$1"').replace(/width=([^" ]+)/g,'width="$1"').replace(/hc-svg-href="([^"]+)">/g,'xlink:href="$1"/>').replace(/ id=([^" >]+)/g,' id="$1"').replace(/class=([^" >]+)/g,'class="$1"').replace(/ transform /g," ").replace(/:(path|rect)/g,"$1").replace(/style="([^"]+)"/g,function(a){return a.toLowerCase()})},getChartHTML:function(){return this.container.innerHTML},getSVG:function(a){var b=this,e,c,g,j,h,d=l(b.options,a),m=d.exporting.allowHTML;if(!k.createElementNS)k.createElementNS=function(a,b){return k.createElement(b)};c=s("div",null,{position:"absolute",top:"-9999em",width:b.chartWidth+"px",height:b.chartHeight+"px"},k.body);g=b.renderTo.style.width;h=b.renderTo.style.height;g=d.exporting.sourceWidth||d.chart.width||/px$/.test(g)&&parseInt(g,10)||600;h=d.exporting.sourceHeight||d.chart.height||/px$/.test(h)&&parseInt(h,10)||400;r(d.chart,{animation:!1,renderTo:c,forExport:!0,renderer:"SVGRenderer",width:g,height:h});d.exporting.enabled=!1;delete d.data;d.series=[];q(b.series,function(a){j=l(a.userOptions,{animation:!1,enableMouseTracking:!1,showCheckbox:!1,visible:a.visible});j.isInternal||d.series.push(j)});a&&q(["xAxis","yAxis"],function(b){q(F(a[b]),function(a,c){d[b][c]=l(d[b][c],a)})});e=new f.Chart(d,b.callback);q(["xAxis","yAxis"],function(a){q(b[a],function(b,c){var d=e[a][c],f=b.getExtremes(),g=f.userMin,f=f.userMax;d&&(g!==void 0||f!==void 0)&&d.setExtremes(g,f,!0,!1)})});g=e.getChartHTML();d=null;e.destroy();u(c);if(m&&(c=g.match(/<\/svg>(.*?$)/)))c='
       
        '+c[1]+"
       ",g=g.replace("",c+"");g=this.sanitizeSVG(g);return g=g.replace(/(url\(#highcharts-[0-9]+)"/g,"$1").replace(/"/g,"'")},getSVGForExport:function(a,b){
     var e=this.options.exporting;return this.getSVG(l({chart:{borderRadius:0}},e.chartOptions,b,{exporting:{sourceWidth:a&&a.sourceWidth||e.sourceWidth,sourceHeight:a&&a.sourceHeight||e.sourceHeight}}))},exportChart:function(a,b){
     var e=this.getSVGForExport(a,b),a=l(this.options.exporting,a);f.post(a.url,{filename:a.filename||"chart",type:a.type,width:a.width||0,scale:a.scale||2,svg:e},a.formAttributes)},print:function(){
     var a=this,b=a.container,e=[],c=b.parentNode,f=k.body,j=f.childNodes,h=a.options.exporting.printMaxWidth,d,m,n;if(!a.isPrinting){a.isPrinting=!0;a.pointer.reset(null,0);E(a,"beforePrint");if(n=h&&a.chartWidth>h)d=a.hasUserSize,m=[a.chartWidth,a.chartHeight,!1],a.setSize(h,a.chartHeight,!1);q(j,function(a,b){
     if(a.nodeType===1)e[b]=a.style.display,a.style.display="none"});f.appendChild(b);t.focus();t.print();setTimeout(function(){c.appendChild(b);q(j,function(a,b){
      if(a.nodeType===1)a.style.display=e[b]});a.isPrinting=!1;if(n)a.setSize.apply(a,m),a.hasUserSize=d;E(a,"afterPrint")},1E3)}},contextMenu:function(a,b,e,c,f,j,h){
     var d=this,m=d.options.navigation,n=m.menuItemStyle,o=d.chartWidth,p=d.chartHeight,l="cache-"+a,i=d[l],w=G(f,j),y,z,t,u=function(b){d.pointer.inClass(b.target,a)||z()};if(!i)d[l]=i=s("div",{className:a},{position:"absolute",zIndex:1E3,padding:w+"px"},d.container),y=s("div",null,r({MozBoxShadow:"3px 3px 10px #888",WebkitBoxShadow:"3px 3px 10px #888",boxShadow:"3px 3px 10px #888"},m.menuStyle),i),z=function(){x(i,{display:"none"});h&&h.setState(0);d.openMenu=!1},v(i,"mouseleave",function(){t=setTimeout(z,500)}),v(i,"mouseenter",function(){clearTimeout(t)}),v(k,"mouseup",u),v(d,"destroy",function(){D(k,"mouseup",u)}),q(b,function(a){
     if(a){
     var b=a.separator?s("hr",null,null,y):s("div",{onmouseover:function(){x(this,m.menuItemHoverStyle)},onmouseout:function(){x(this,n)},onclick:function(b){b&&b.stopPropagation();z();a.onclick&&a.onclick.apply(d,arguments)},innerHTML:a.text||d.options.lang[a.textKey]},r({cursor:"pointer"},n),y);d.exportDivElements.push(b)}}),d.exportDivElements.push(y,i),d.exportMenuWidth=i.offsetWidth,d.exportMenuHeight=i.offsetHeight;b={display:"block"};e+d.exportMenuWidth>o?b.right=o-e-f-w+"px":b.left=e-w+"px";c+j+d.exportMenuHeight>p&&h.alignOptions.verticalAlign!=="top"?b.bottom=p-c-w+"px":b.top=c+j-w+"px";x(i,b);d.openMenu=!0},addButton:function(a){
     var b=this,e=b.renderer,c=l(b.options.navigation.buttonOptions,a),g=c.onclick,j=c.menuItems,h,d,m={stroke:c.symbolStroke,fill:c.symbolFill},n=c.symbolSize||12;if(!b.btnCount)b.btnCount=0;if(!b.exportDivElements)b.exportDivElements=[],b.exportSVGElements=[];if(c.enabled!==!1){
     var o=c.theme,p=o.states,k=p&&p.hover,p=p&&p.select,i;delete o.states;g?i=function(a){a.stopPropagation();g.call(b,a)}:j&&(i=function(){b.contextMenu(d.menuClassName,j,d.translateX,d.translateY,d.width,d.height,d);d.setState(2)});c.text&&c.symbol?o.paddingLeft=f.pick(o.paddingLeft,25):c.text||r(o,{width:c.width,height:c.height,padding:0});d=e.button(c.text,0,0,i,o,k,p).attr({title:b.options.lang[c._titleKey],"stroke-linecap":"round",zIndex:3});d.menuClassName=a.menuClassName||"highcharts-menu-"+b.btnCount++;c.symbol&&(h=e.symbol(c.symbol,c.symbolX-n/2,c.symbolY-n/2,n,n).attr(r(m,{"stroke-width":c.symbolStrokeWidth||1,zIndex:1})).add(d));d.add().align(r(c,{width:d.width,x:f.pick(c.x,B)}),!0,"spacingBox");B+=(d.width+c.buttonSpacing)*(c.align==="right"?-1:1);b.exportSVGElements.push(d,h)}},destroyExport:function(a){
     var a=a.target,b,e;for(b=0;b