Highcharts

一、Highcharts API

       英文:http://api.highcharts.com/highcharts

       中文:http://higrid.net/docs/highcharts_cn/

       下载地址:http://www.highcharts.com/download

二、Highcharts 特性

       Highcharts是一个制作图表的纯JavaScript类库,主要特性如下:

            兼容性:兼容当今所有的浏览器,包括IPhone、IE和火狐等;

            对个人用户完全免费;

           纯JS,无BS;

           支持大部分的图表类型:直线图、曲线图、区域图、区域曲线图、柱状图、饼状图、散步图;

           跨语言:不管是PHP、ASP.NET、还是JAVA都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有exporting.js和jquery.min.js;

           提示功能:鼠标移动到图标的某一点上有提示信息;

           放大功能:选中图表部分放大,近距离观察图标;

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

           时间轴:可以精确到毫秒

三、创建第一个图表(折线图)

        1、在页面引入必要的JS文件

            

        2、在页面定义一个宽300高150的DIV,定义一个id属性

           

        3、开始写JavaScript

            Highcharts_第1张图片

            这里图表(myChart)的宽和高故意比DIV的宽和高小点,我们看看效果

                 Highcharts_第2张图片

            有背景色的是myChart,而外边框的是DIV,我给DIV的边框显示出来了。由此可见DIV是chart的一个容器

            继续往下写:

             Highcharts_第3张图片

                效果如下:

                    Highcharts_第4张图片 


修改/去掉Highcharts生成图表中右下角的链接

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

 

credits:{enabled:!0,text:"Highcharts.com",href:"http://www.highcharts.com",

 

enabled:设置是否显示链接

text:设置链接显示的名称

href:设置链接的url


修改/去掉Highcharts生成图表中右上角的打印及导出按钮

在js中设置以下代码:

 

exporting:{ 
                     enabled:true //用来设置是否显示‘打印’,'导出'等功能按钮,不设置时默认为显示 ,false则隐藏
                },





你可能感兴趣的:(Highcharts,折线图)