highcharts基本介绍

转自:http://www.cnblogs.com/jyh317/p/4189773.html

一、highcharts简介

 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表,可以满足你对Web图表的任何需求 !

二、Highcharts的构造

三、名词解释

英文名 中文名
描述

lang 语言文字对象 所有Highcharts文字相关的设置
chart 图表 图表区、图形区和通用图表配置选项
colors 颜色 图表数据列颜色配置,是一个颜色数组
credits 版权信息 Highcharts在图表的右下方放置的版权信息及链
drilldown 向下钻取 向下钻取数据,深入到其中的具体数据
exporting 导出模块 导出功能配置,导出即将图表下载为图片或打印图表
labels 标签 可以放置到图表区域内任何位置的HTML标签
legend 图例 用不同形状、颜色、文字等 标示不同数据列,通过点击标示可以显示或隐藏该数据列
loading 加载中 加载选项控制覆盖绘图区的加载屏的外观和文字
navigation 导航 导出模块按钮和菜单配置选项组
noData 没有数据 没有数据时显示的内容
pane 分块 针对仪表图和雷达图专用的配置,主要设置弧度及背景色
plotOptions 数据点配置 针对不同类型图表的配置。Highcharts所有图表类型请看下表
series 数据列 图表上一个或多个数据系列,比如图表中的一条曲线,一个柱形
title 标题 包括即标题和副标题,其中副标题为非必须的
tooltip 数据点提示框 当鼠标滑过某点时,以框的形式提示改点的数据,比如该点的值,数据单位等
Axis 坐标轴 包括x轴和y轴。多个不同的数据列可共用同一个X轴或Y轴,当然,还可以有两个X轴或Y轴,分别显示在图表的上下或左右。

四、Highcharts的优势

兼容性

Highcharts支持目前所有的现代浏览器,包括IE6 +、iPhone/iPad、Android。Highcharts在标准(W3C标准)浏览器中使用SVG技术渲染图形,在遗留的IE浏览器中使用VML技术来绘图。

开源免费

针对个人用户及非商业用途免费,并提供源代码下载,你可以任意的修改它。商业用途需要购买许可,个人及非商业用途须遵循CC BY-NC 3.0协议

纯Javascript

Highcharts完全基于本地浏览器技术,不需要任何插件(例如Flash、java),不需要安装任何服务器环境或动态语言库支持,只需要两个js文件即可运行。

图表类型丰富

Highcharts目前支持直线图、曲线图、面积图、曲线面积图、面积范围图、曲线面积范围图、柱状图、柱状范围图、条形图、饼图、散点图、箱线图、气泡图、误差线图、漏斗图、仪表图、瀑布图、雷达图,共18种类型图表,其中很多图表可以集成在同一个图形中形成综合图。

动态性

提供丰富的API接口,方便在创建图表后对图表的任意点、线和文字等进行增加、删除和修改操作。支持众多的Javascript事件,结合jQuery、MooTools、Prototype等javascript框架提供的Ajax接口,可以实时地从服务器取得数据并实时刷新图表。

多轴支持

对于需要比较的数据,Highcharts提供多轴支持。并且可以针对每个轴设置其位置、文字和样式等属性。

动态提示框

当鼠标悬停在图表上的数据点时,Highcharts会显示信息提示框,当然,显示的内容和样式可以自己指定和设置。

图表导出和打印功能

你可以将Highcharts图表导出为PNG、JPG、PDF和SVG格式文件或直接在网页上打印出来。

图表缩放

可以设置图表的缩放,让你更方便查看图表数据。

支持外部数据加载

Highcharts支持多种数据形式,可以是Javascript数组、json文件、json对象和表格数据等,这些数据来源可以是本地、不同页面,甚至是不同网站。

时间: 2024-10-12 15:53:26

highcharts基本介绍的相关文章

基于MVC+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用图表控件Highcharts,以及对其进行统一汉化等操作,让我们的程序功能更加丰富,内容更加美观. 1.Highcharts基础介绍 Highcharts是一个非常流行,界面美观的纯Javascript图表库.它主要包括两个部分:Highcharts和Highstock.Highcharts可以为您

基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用图表控件Highcharts,以及对其进行统一汉化等操作,让我们的程序功能更加丰富,内容更加美观. 1.Highcharts基础介绍 Highcharts是一个非常流行,界面美观的纯Javascript图表库.它主要包括两个部分:Highcharts和Highstock.Highcharts可以为您

(转)基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

http://www.cnblogs.com/wuhuacong/p/3736564.html 在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用图表控件Highcharts,以及对其进行统一汉化等操作,让我们的程序功能更加丰富,内容更加美观. 1.Highcharts基础介绍 Highcharts是一个非常流行,界面美观的纯Javascript图

介绍js插件Highcharts 图表

一.介绍:Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCharts支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合图表. 二.参数介绍 Chart 图表区选项 Color 颜色选项 Title 标题选项 Subtitle 副标题选项 xAxis X轴选项 yAxis Y轴选项 Series 数据列选项 plotOptions 数据点

Highcharts(一)

由来 2014年10月27日,我入职了我现在的这家公司,也是我第一家公司.到今天已经快3个月了,虽然这家公司规模不小,但是IT部的规模很小.到目前为止,整个部门17人,包括运维和开发.我们的项目组叫”MD”项目组,整个团队5个人.刚进公司简单的熟悉业务后,老大安排我负责系统服务端的接口.简单的说就是前端需要什么样的数据,我就给它提供相应的接口.就这样,写了1个多月的接口.由于系统需求,需要系统提供曲线图.老大让我到网上找一个控件学习一下,解决这个需求.这就是我学习Highcharts的由来. 介

Highcharts 环境配置

Highcharts 环境配置 本章节我们将为大家介绍如何在网页中使用 Highcharts. Highcharts 依赖于 jQuery,所以在加载 Highcharts 前必须先加载 jQuery 库. 如果你对 jQuery 不熟悉,可以参阅本站的jQuery 教程. 安装 jQuery jQuery 安装可以使用以下两种方式: 1.访问 jquery.com 下载jQuery包. 2.使用本站静态资源库的jQuery资源: http://cdn.static.runoob.com/lib

highcharts 结合phantomjs纯后台生成图片系列二之php2

上篇文章中介绍了phantomjs的使用场景,方法. 本篇文章详细介绍使用php,highcharts 结合phantomjs纯后台生成图片.包含一步步详细的php代码 一.highcharts 结合phantomjs纯后台生成图片系列的准备: 下载phantomjs解析插件,从highcharts官方下载所需插件. 新建一个工程文件夹phantomjs,所必备的js文件有: highcharts 结合phantomjs纯后台生成图片系列二之php 其中jquery.js为 v1.7.1; hi

highcharts 结合phantomjs纯后台生成图片系列二之php

上篇文章中介绍了phantomjs的使用场景,方法.本篇文章详细介绍使用php,highcharts 结合phantomjs纯后台生成图片. 一.准备: 下载phantomjs解析插件,从 highcharts官方 下载所需插件. 新建一个工程文件夹名位:phantomjs,所必备的js文件有: 其中jquery.js为v1.7.1; highcharts-convert.js的下载地址可去 github上下载 . highcharts官方文档有关于highcharts-convert.js的使

关于Highcharts图表组件动态修改属性的方法(API)总结之Series

Highcharts图表组件内的Series很重要,如果说Categries是其大脑,那么Series就是其心脏.这两者才是Highcharts图表组件的重中之重啊.接下来就为大家介绍关于设置Series的相关方法. 一.目录结构 二.API 1.addPoint(添加一个数据点) 参数: options:数据值(①可以是具体的一个Y轴数值,那么X轴坐标系统会随即分配一个:②可以设置一个数组,有着X和Y的数值,如:[xValue,yVlaue] 这样的形式:③可以设置一个Object(对象),详