`
gaojingsong
  • 浏览: 1182031 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

【Highcharts 介绍】

阅读更多

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。



 

HighCharts的主要特性包括:

1.兼容性:HighCharts采用纯JavaScript编写,兼容当今大部分的浏览器,包括Safari、IE和火狐等等;

HighCharts的几种基本的官方图表示例

HighCharts的几种基本的官方图表示例

2.图表类型:HighCharts支持图表类型,包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等,可以满足各种需求。

3.不受语言约束:HighCharts可以在大多数的WEB开发中使用,并且对个人用户免费,支持ASP,PHP,JAVA,.NET等多种语言中使用。

4.提示功能:HighCharts生成的图表中,可以设置在数据点上显示提示效果,即将鼠标移动到某个数据点上,可以显示该点的详细数据,并且可以对显示效果进行设置。

5.放大功能:HighCharts可以大量数据集中显示,并且可以放大某一部分的图形,将图表的精度增大,进行详细的显示,可以选择横向或者纵向放大。

6.时间轴:可以精确到毫秒。

7.导出:表格可导出为 PDF/ PNG/ JPG / SVG 格式

8.输出:网页输出图表。

9.可变焦:选中图表部分放大,近距离观察图表;

10.外部数据:从服务器载入动态数据。

11.文字旋转:支持在任意方向的标签旋转。

 



 

Highcharts 环境配置编辑

在 HTML 页面引入 jQuery 与Highcharts库,代码如下:

<head>

   <script src="/jquery/jquery.min.js"></script>

   <script src="/highcharts/highcharts.js"></script>

</head>



 

图表类型

line:直线图

spline:曲线图

area:面积图

areaspline:曲线面积图

arearange:面积范围图

areasplinerange:曲线面积范围图

column:柱状图

columnrange:柱状范围图

bar:条形图

pie:饼图

scatter:散点图

boxplot:箱线图

bubble:气泡图

errorbar:误差线图

funnel:漏斗图

gauge:仪表图

waterfall:瀑布图

polar:雷达图

pyramid:金字塔

 



 

  • 大小: 16.2 KB
  • 大小: 100 KB
  • 大小: 170.3 KB
  • 大小: 138.7 KB
分享到:
评论

相关推荐

    Highcharts插件介绍及下载说明

    该文档提供了Highcharts插件的介绍和下载说明,详细列出了各种插件的功能和下载链接,帮助用户根据自己的需要选择合适的插件。例如,Annotations插件可以为图表添加注释,使图表的信息更加丰富;...

    Highcharts 4功能介绍文档

    ### Highcharts 4 新功能与特性详解 #### 一、概览 Highcharts 4作为一款先进的JavaScript图表库,自其发布以来便备受关注。新版Highcharts 4不仅提升了图表性能,还增加了许多令人期待的新功能,如3D显示、...

    highcharts去掉水印的方法

    本文将详细介绍如何在Highcharts中去除水印,并提供具体的代码示例。 #### 一、理解Highcharts水印设置 首先,我们需要了解Highcharts中水印设置的基本结构。Highcharts默认会在图表右下角显示一个链接到...

    AspNet的Highcharts中文翻译Demo

    本文将详细介绍如何在AspNet中使用Highcharts的中文版,以及这个Demo所涵盖的关键知识点。 首先,`AspNet Highcharts 中文版`是指在ASP.NET项目中,对Highcharts的原始英文API和文档进行了中文翻译,便于国内开发者...

    Highcharts-3.0.2.zip

    6. **index.htm**:这应该是主入口文件,可能是一个简单的HTML页面,用于加载和展示Highcharts的示例或者介绍如何在实际项目中引入和使用Highcharts库。 7. **其他文件**:未具体列出的文件可能包括样式表(CSS)...

    Highcharts实现图形报表

    在《http://www.cnblogs.com/biehongli/p/6351464.html》这篇博客中,作者详细介绍了Highcharts的使用步骤。以下是一些关键点: 1. **HTML结构**:首先,你需要在HTML页面中创建一个`&lt;div&gt;`元素作为图表容器,并为...

    Highcharts5.0.2

    **Highcharts 5.0.2 知识点详解** ...- `docs/`或`api/`目录:文档资料,详细介绍API和配置选项。 在实际开发中,你可以根据项目需求选择合适的模块,结合配置项和事件处理,创建出满足需求的高质量数据可视化图表。

    Highcharts资源包

    API文档详细介绍了每个函数、方法和配置选项,包括它们的参数、返回值和用途。通过阅读API文档,开发者可以精确地控制图表的样式、行为和交互效果。 `gfx`和`graphics`目录可能包含Highcharts的图形资源,如图标、...

    报表 HighCharts

    ### 报表HighCharts使用教程 #### 一、HighCharts简介 ...在本教程中,我们将详细介绍如何创建一个简单的HighCharts图表。以下是一个完整的示例代码,其中包含了HighCharts的基本配置项。 ```html ...

    Highcharts-7.0.3.zip

    下面将详细介绍Highcharts及其相关知识点。 1. **兼容性**:Highcharts 兼容广泛的浏览器环境,包括对旧版本IE浏览器的支持,如IE6及更高版本。这使得它能在各种桌面和移动设备上无缝运行,确保了广泛用户群的兼容...

    highcharts导出服务器的asp mvc实现

    本教程将详细介绍如何在ASP.NET MVC框架下实现一个Highcharts导出服务器。 首先,我们需要了解Highcharts的导出功能。Highcharts内置的导出功能允许用户将图表以图像(JPEG、PNG、PDF或SVG)的形式保存或打印,但是...

    js图形处理框架

    Highcharts介绍** Highcharts是一款高性能、易于使用的JavaScript图表库,它支持多种图表类型,包括折线图、柱状图、饼图、散点图等。Highcharts采用SVG(Scalable Vector Graphics)技术进行渲染,确保在各种屏幕...

    Highcharts几种简单的示例

    下面我们将详细介绍这些图表类型及其在Highcharts中的实现。 1. **散点图(Scatter chart)** 散点图是一种用点表示数据分布的图表,通常用于展示两个变量之间的关系。在`散点图.html`中,Highcharts允许我们设置...

    HighCharts示例图

    以下是一些关键知识点的详细介绍: 1. **图表类型**:HighCharts支持多种图表类型,包括折线图(Line)、柱状图(Column)、饼图(Pie)、散点图(Scatter)和面积图(Area)等。这些图表可以独立使用,也可以组合...

    Highcharts-2.3.3以及英文版API

    1. **Highcharts_Options_Reference_帮助_说明.doc**:这是一份关于Highcharts 2.3.3的官方选项参考文档,详细介绍了如何配置图表的各种属性和选项,如图表类型、数据系列、轴、标题、图例、数据标签等。通过这份...

    Highcharts-4.0.1资源包+中文chm离线API

    5. **Docs**:文档部分,包括HTML或CHM格式的离线API文档,详细介绍了每个函数、配置选项及其用法。 6. **Images**:可能包含一些用于图表中的图标或图形资源。 7. **Source Code**:对于开发者来说,源代码可以帮助...

Global site tag (gtag.js) - Google Analytics