文档章节

Highcharts

weslie
 weslie
发布于 2015/06/29 13:19
字数 486
阅读 149
收藏 2

一、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

           

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

                

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

            继续往下写:

             

                效果如下:

                     


修改/去掉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则隐藏
                },





© 著作权归作者所有

上一篇: JavaScript
下一篇: ExtJS
weslie
粉丝 1
博文 51
码字总数 80088
作品 0
虹口
程序员
私信 提问
Highcharts React、Angular 官方扩展包发布

为了方便用户在不同的框架中使用 Highcharts,我们针对目前市面上最流行的前端框架 React、Angular 进行封装并正式对外发布。 Highcharts React 扩展包 项目地址:https://github.com/highch...

简数科技
2018/04/17
1
0
Highcharts插件制作中文教程

Highcharts强大的扩展功能,是它深受广大用户喜爱的原因之一。通过使用highcharts api,很多使用者根据自己的需求制作了highcharts插件,实现了各种功能扩展。关于highcharts 中文教程资源已...

咲晚杍
2014/05/20
303
0
​网页图表Highcharts实践教程之图表代码构成

网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例。 【实例1-1】下面来制作北京连续一周最高温度折线图。操作过程如下: (1)新建...

大学霸
2015/05/28
387
0
网页图表Highcharts实践教程之认识Highcharts

网页图表Highcharts实践教程之认识Highcharts 第1章 认识Highcharts Highcharts是国际知名的一款图表插件。它完全使用Javascript编写实现。其结构清晰,使用简单。开发人员可以很轻松地构建出...

大学霸
2015/05/27
635
0
HighCharts绘制折线图

这篇是17年12月份在慕课网写的一篇手记,当初项目需要用JavaScript实现折线图... 概述:作为一款出色的交互图制作工具,highcharts有着全面的选项、参数等配置信息。今天我整理了highcharts的...

青衣霓裳
06/28
5
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周五乱弹 —— 你已经是个成熟的熊猫了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @Sharon啊 :#今日歌曲推荐# 分享黑鸭子的单曲《羞答答的玫瑰静悄悄的开》 《羞答答的玫瑰静悄悄的开》- 黑鸭子 手机党少年们想听歌,请使劲儿...

小小编辑
36分钟前
144
6
结合Spring Security进行web应用会话安全管理

在本文中,将为大家说明如何结合Spring Security 和Spring Session管理web应用的会话。 一、Spring Security创建使用session的方法 Spring Security提供4种方式精确的控制会话的创建: alwa...

fightinging
41分钟前
4
0
83、Mybatis和Hibernate重要区别

Mybatis;入门简单,程序容易上手开发,节省开发成本。Mybatis需要程序猿自己编写sql语句,是一个不完全的ORM框架,对sql修改和优化非常容易实现。 Mybatis适合开发需求变更频繁的系统,比如...

lianbang_W
今天
5
0
设计模式之状态模式

定义 Allow an object to alter its behavior when its internal state changes.The object will appear to change its class.(当一个对象内在状态改变时允许其改变行为,这个对象看起来像改...

陈年之后是青葱
今天
6
0
Python常用模块之os.path

os.path.abspath(path) 输入相对路径,返回绝对路径 Python 3.7.0 (v3.7.0:1bf9cc5093, Jun 27 2018, 04:59:51) [MSC v.1914 64 bit (AMD64)] on win32Type "copyright", "credits" or "lic......

松鼠大帝
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部