`

HighCharts 详细使用及API文档说明

阅读更多

一、HighCharts开发说明

       HighCharts开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题下有对齐方式(align),标题文字(text)等。下图为整个图表的每个部分位置说明(请对照下面HighCharts整体结构)

 

 二、HighCharts整体结构

通过查看API文档我们知道HighCharts结构如下:(API文档在文章后面提供下载)

var chart = new Highcharts.Chart({

       chart: {…}              // 配置chart图表区

       colors: [{...}]    // 配置主体显示颜色(多个线条和柱体的颜色顺序的)

       credits: {…}     // 配置右下角版权链接

       exporting: {…}  // 配置导出及打印

       global: {…}      // Highcharts.SetOptions方法调用

       labels: {…}        // HTML标签,可以放置在绘图的任何位置

       lang: {…}        // 语言对象属性配置

       legend: {…}         // 配置图例选项

       loading: {…}    // 配置图表加载选项

       navigation: {…} // 配置导出按钮属性

       pane: {…}        // 仅适用于极性图表和角仪表

       plotOptions: {…}          // 配置数据点选项

       series: [{...}]               // 配置数据列选项

       subtitle: {…}   // 配置副标题

       title: {…}                  // 配置标题

       tooltip: {…}               // 配置数据点提示框

    xAxis: {…}              // 配置x轴选项

       yAxis: {…}              // 配置y轴选项

})

上面红色部分是图标完整性及美观必须自己配置的选项,其他选项无特殊需要默认就行,也就是不用配置,所以开发HighCharts是不是很简单,只需要配置简单的几个选项就行,下面详细讲解每个选项的配置。

 

三、HighCharts每部分详细配置

1chart :图表区选项

              主要设置图表的类型,图表装载容器名,背景,高度,宽度等图表的整体属性。

参数 描述 默认值
backgroundColor 设置图表区背景色 #FFFFFF
borderWidth 设置图表边框宽度 0
borderRadius 设置图表边框圆角角度 5
renderTo 图表放置的容器,一般在html中放置一个DIV,获取DIVid属性值 null
defaultSeriesType 默认图表类型line, spline, area, areaspline,
column, bar, pie , scatter
0
width 图表宽度,默认根据图表容器自适应宽度 null
height 图表高度,默认根据图表容器自适应高度 null
margin 设置图表与其他元素之间的间距,数组,如[0,0,0,0] [null]
plotBackgroundColor 主图表区背景色,即X轴与Y轴围成的区域的背景色 null
plotBorderColor 主图表区边框的颜色,即X轴与Y轴围成的区域的边框颜色 null
plotBorderWidth 主图表区边框的宽度 0
shadow 是否设置阴影,需要设置背景色backgroundColor false
reflow 是否自使用图表区域高度和宽度,如果没有设置widthheight时,会自适应大小 true
zoomType 拖动鼠标进行缩放,沿x轴或y轴进行缩放,可以设置为:‘x’,'y’,'xy’
events 事件回调,支持addSeries方法,click方法,load方法,selection方法等的回调函数  

 

2colors :数据列颜色选项

    主要是数据列颜色设置,比如多条线条中的每个线条颜色。

参数 描述 默认
color 用于展示图表,折线/柱状/饼状等图的颜色,数组形式。

一组html颜色代码

        

colors: [
                 '#058DC7',
                 '#50B432',
                 '#ED561B',
                  '#DDDF00',
                 '#24CBE5', 
                 '#64E572',
                 '#FF9655',
                 '#FFF263',
                 '#6AF9C4'
    ]

说明:1、颜色代码为html标准,可通过DW等复制想要的代码

2、默认是从第一个数据列起调用第一个颜色代码,有多少个数

据列调用相应数量的颜色

3、当数据列大于默认颜色数量时,重复从第一个颜色看是调用

 

3credits :版权链接选项

参数 描述 默认值
enabled 是否显示版权及链接,布尔型,默认为显示 true
position 位置。可用align调整对齐方式,x,y设置距离。 position: {align: ‘right’,x: -10,
         verticalAlign: ‘bottom’,y: -5 }
href 链接地址。String型,默认是highCharts官网 www.highcharts.com
style 名片CSS模式

itemStyle : {

cursor: ‘pointer’,color: ‘#909090′,

fontSize: ’10px’ }

text 显示名字。 highcharts.com

 

 

4exporting :导出及打印选项

参数 描述 默认值
buttons 打印和导出按钮设置。其中两个按钮中又有很多样式等设置,如有需要可详细查看API文档 默认按钮样式
enableImages 在导出的图片中添加logo水印。布尔型,默认是false false
enabled 是否显示按钮(也就是启用打印导出功能),布尔型,默认显示 true
filename 导出图片文件名,String型 chart
type 导出图片的格式,有jpg和png可选,String型 jpg/png
url 转换图片的服务器url,默认是用highcharts服务器 http://export.highcharts.com
width 图片大小,数字型 800

5global Highcharts.SetOptions方法调用

    全局选项,并不适用于每一个图表。这些选项,如lang选项,必须设置使用Highcharts.setOptions方法。一般用不到,详情请查看API文档。

6labels HTML标签(可放置在图表的任意地方)

参数 描述 默认值
items 包含两个选项html和style,分别代表html语句及样式 iteml :{

 

 

 

 

 

    html : “”,

    style {
            left: ’100px’,top: ’100px’}

  }

style css样式

style:{ color : ‘#3E576F’}

7lang :语言配置选项,主要配置符号、导出时显示的语句、时间显示语言等。和上面的global参数有关,即调用Highcharts.SetOptions方法。下表列举常用的选项注意:lang选项其实就是配置一些显示语言,API中都有详细说明。

参数 描述 默认值
decimalPoint 小数点 .
downloadJPEG 导出显示的文字,下面还有downloadPDF等,都一样 Download JPEG image等
months 月份,字符串数组形式

['January' 'February', 'March', 'April', 'May', 'June', 'July',

'August', 'September', 'October', 'November', 'December']

numericSymbols 数值单位,比如1000为1k ['k', 'M', 'G', 'T', 'P', 'E']

8legend :图例选项,即数据类标示。

参数 描述 默认值
layout 显示形式,支持水平horizontal和垂直vertical horizontal
align 对齐方式 center
backgroundColor 背景颜色 nulll
borderColor 图例边框颜色 #909090
borderRadius 图例边框角度 5
enabled 是否显示图例 true
floating 是否可以浮动,配合x,y属性 false
shadow 是否显示阴影 false
style 图例样式 详见API文档

9loading: 图表加载选项

参数 描述 默认值
hideDuration 淡出效果持续时间,以毫秒为单位 100
labelStyle 标签样式,css形式 详见API文档
showDuration 淡入效果持续时间,以毫秒 100
style 图表加载样式 详见API文档

10navigation  导出按钮选项,配置导出按钮及打印样式等,详见API文档。

11pane 极性图表和角仪表选项配置(这两种表是在新版本2.0.1新增加的选项)

12plotOptions :数据点选项。分不同图表类型配置不同,下面就常用的选项及spline选项列表如下

参数 描述 默认值
enable 是否在数据点上直接显示数据 false
allowPointSelect 是否允许使用鼠标选中数据点 false
formatter 回调函数,格式化数据显示内容 formatter: function()  { return this.y; }
marker 对某个点标记,多种样式可选  

13series :数据列选项

参数 描述 默认值
data 显示在图表中的数据列,可以为数组或者JSON格式的数据。如:data:[0, 5, 3, 5],或
data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]
‘’
name 数据列名称 ‘’
type 数据列类型,支持 area, areaspline, bar, column, line, pie, scatter、spline line

14subtitle  副标题选项。和title配置一样,在title中详细讲解

15title  标题选项

参数 描述 默认值
text 标题文本内容 Chart title
align 水平对齐方式 center
verticalAlign 垂直对齐方式 top
margin 标题与副标题之间或者主图表区间的间距 15
floating 是否浮动,如果为true,则标题可以偏离主图表区,可配合x,y属性使用 false
style css样式

{ color: ‘#3E576F’, 
          fontSize: ’16px’}

x 按照水平对齐方式的距离 0
y 按照垂直对齐方式的距离 15

16tooltip :数据点提示框选项

参数 描述 默认值
enable 是否显示提示框 true
backgroundColor 设置提示框的背景色 rgba(255, 255, 255, .85)
borderColor 提示框边框颜色,默认自动匹配数据列的 auto
borderRadius 提示框圆角度 5
shadow 设置提示框内容样式,如字体颜色等 color:’#333′
formatter

回调函数,用于格式化输出提示框的显示内容

返回的内容支持html标签如:<b>, <strong>,<br/>

 

17xAxis x轴选项

参数 描述 默认
categories

设置X轴分类名称,数组,例如:

categories: ['Apples', 'Bananas', 'Oranges']

[]

title

X轴名称,支持text、enabled、align、rotation、style等属性

 

 

labels

设置X轴各分类名称的样式style,格式formatter,角度rotation等

 

max

X轴最大值(categories为空时),如果为null,

则最大值会根据X轴数据自动匹配一个最大值

 

null

min

X轴最小值(categories为空时),如果为null,

则最小值会根据X轴数据自动匹配一个最小值

 

null

gridLineColor

网格(竖线)颜色

 

#C0C0C0

gridLineWidth

网格(竖线)宽度

1

lineColor

基线颜色

#C0D0E0

lineWidth

基线宽度

0

18yAxis y轴选项

      和x轴配置相同或类似。

 

        注意:1、以上所有参数如果没特殊要求,及为默认是,可不用再代码中配置

                2、API中还有更多的配置选项,可通过阅读API了解详细

                3、红色部分为主要配置内容

 

四、实例说明HighCharts开发步骤

1、要求

 

1)绘制一个显示本站2012/9/22日访问统计,包括浏览量(pv),IP数的折线图。

2x轴按每小时统计,y轴显示对应的数量

3)折线图上x轴对应的点显示数量,当鼠标经过改点时,用提示框形式显相关信息

4)要有图例显示每条折现代表什么数据信息

5)图表右下角加上“我爱物联网”字样并链接到www.52wulian.org

6)要有主标题和副标题

7)要能实现图表打印及导出常见格式的图片功能

 

2、开发步骤

 

1)新建一个文件夹名为“HighCharts”,并在该文件夹内新建一个名为“js”的文件夹,将所需的“jquery-2.1.1.min.js”、“highcharts.js”和“exporting.js”拷贝至“js”文件夹。

2)在“HighCharts”文件夹里新建一个html文件,随意命名,用文本编辑器写入如下内容:(html代码,相信大家都看的懂)

        <!-- 加载jquery -->
        <script type="text/javascript" src="js/jquery-2.1.1.min.js">
        </script>
        <!-- javascript代码  -->
        <script type="text/javascript">
            $(function(){
                var chart;
                $(document).ready(function(){
                    //定义一个HighCharts
                    chart = new Highcharts.Chart({});
                });
            });
        </script>
        <!-- 加载 highC主js文件 ,-->
        <script type="text/javascript" src="js/highcharts.js">
        </script>
        <!-- 加载 exporting ,是highCharts实现打印,下载图片必须的js文件,如果不需要该功能,可不用-->
        <script type="text/javascript" src="js/exporting.js">
        </script>
        <!-- 新建一个容器,存放在head部分定义的Chart内容 。这里的id一定是chart : {...}内的renderTo的值-->

3)配置chart中每个选项的属性,代码如下

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>highcharts 饼状图</title>
		
		 <!-- 加载jquery -->
		<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
		<!-- 加载 highcharts文件  -->
		<script type="text/javascript" src="js/highcharts.js"></script>
		<!-- 加载 exporting ,是highCharts实现打印,下载图片必须的js文件,如果不需要该功能,可不用-->
		<script type="text/javascript" src="js/exporting.js"></script>

		<!-- javascript代码  -->
        <script type="text/javascript">
            $(function(){
				//定义一个HighCharts
				var chart = new Highcharts.Chart({
					//配置chart选项
					chart: {
						renderTo: container,//容器名,和body部分的div id要一致
						type: 'pie',// 图表类型
                        plotBackgroundColor: null,
                        plotBorderWidth: 1,//null,
                        plotShadow: false
                    },
					//配置版权链接及名称选项
		            credits: {
		                enabled : true,
		                href : "http://www.iteye.com",
		                text : "我爱iteye"
		            },
					//配置标题
                    title: {
                        text: 'Browser market shares at a specific website, 2014'
                    },
					//配置副标题
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
					//配置数据,使其点显示信息
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            }
                        }
                    },
					//配置数据列
                    series: [{
                        name: 'Browser share',
                        data: [
							['Firefox', 45.0], 
							['IE', 26.8], 
							{
	                            name: 'Chrome',
	                            y: 12.8,
	                            sliced: true,
	                            selected: true
	                        }, 
							['Safari', 8.5], 
							['Opera', 6.2], 
							['Others', 0.7]
						]
                    }]
                });
				})
        </script>
    </head>
    <body>
    	<!-- 新建一个容器,存放在head部分定义的Chart内容 。这里的id一定是chart : {...}内的renderTo的值-->
        <div id="container" style="min-width: 500px; height: 700px; max-width: 1000px; margin: 0 auto"></div>
    </body>
</html>

 

HighCharts API文档下载

       本站下载:http://pan.baidu.com/share/link?shareid=63516&uk=3087605183

       本站统一解压密码:www.52wulian.org

    官方在线APIhttp://api.highcharts.com/highcharts

 

写在后面的话:其实HighCharts开发很简单,只需要配置几个简单的选项,填充数据即可,不要被这篇文章的诸多选项吓住了,这里只是为了详细说明每个配置,大多数的配置只需默认值就行,也就不用配置。

附件中有所需要的jar包,自己尝试做一下,效果会很好!

 

  • js.rar (83.5 KB)
  • 下载次数: 0
分享到:
评论

相关推荐

    HighCharts_详细使用及API文档说明

    本篇文章将详细解析HighCharts的使用方法以及其API接口,帮助开发者更好地理解和运用这个强大的工具。 一、HighCharts基本使用 1. 引入HighCharts库:首先,你需要在HTML文件中引入HighCharts的JavaScript文件。...

    HighCharts 2.1.9 及API说明文档

    `HighCharts API.zip`文件很可能是HighCharts的官方API文档,它将详细解释每个配置选项、函数和方法的用法,是开发过程中不可或缺的参考资料。通过阅读和理解API文档,开发者可以充分利用HighCharts的潜力,创造出...

    highcharts中文帮助文档(API)

    需要注意的是,尽管文档提供了常用的选项配置信息,但对于更多详细配置和高级功能,建议参考官方API文档:***。在开发过程中,理解这些配置项背后的原理和作用能够帮助开发者更高效地利用Highcharts库,创建出既美观...

    HighCharts Demo以及详细使用

    HighCharts 详细使用及API文档说明,附带小例子,包你物超所值!

    Highcharts 3.0版 API文档离线版

    Highcharts 最新3.0版离线API文档 网上能找到的都是2.X版本的,而且整理得也不怎么好 这个插件效果非常牛B,但官网API 文档不提供下载,而且访问也不怎么稳定,实在非常冒火 于是花了点时间把官网的相关资源扒下来,...

    highcharts3.0 API 离线版

    因官网不支持api文档下载,而在线访问的速度亲你是知道的,慢得要死。所以我花了一点时间扒下了文档,改了部分js,做了一个离线的API文档。(其中只有plotOptions里缺了errorbar和waterfall,感觉用不到就没抓这部分了...

    Highcharts_Highstock中文API

    **一、Highcharts结构及API文档** Highcharts的基本结构由一系列配置对象组成,这些配置对象定义了图表的各个方面,包括但不限于图表类型、颜色、图表标题、轴设置等。以下是Highcharts结构的基本组件: 1. **准备...

    Highcharts API 帮助文档html版

    近期用到Highcharts,但公司上网不方便,网络上也没有找到其他的离线API。无奈只好自己决定制作一个,花了3个小时终于制作好了,现在放上来与大家分享,顺便也挣点辛苦积分。 需要放在web服务器上运行,如tomcat。

    HighCharts一些demo和API

    这个压缩包包含了关于HighCharts的一些关键资源,包括API文档、示例Demo和属性截图,对于理解和应用HighCharts非常有帮助。 首先,让我们详细了解一下HighCharts的API。API(Application Programming Interface)是...

    highcharts 中文API及DEMO

    这个压缩包"highcharts 中文API及DEMO"可能包含了Highcharts的中文版API文档和一些示例代码,对于学习和使用Highcharts的中文用户来说是非常有价值的资源。 首先,Highcharts的API文档是理解其功能和用法的关键。在...

    highcharts&highstock中文API

    Highcharts结构及API文档** - **准备工作**:Highcharts基于jQuery开发,因此,首先要在页面上引入jQuery库。其次,引入Highcharts.js文件。若需使用导出功能,则需额外引入位于`/Highcharts-X.X.X/js/modules/`...

    Highcharts图表库设计手册文档-HighChart CHM文档压缩包

    Highcharts CHM文档包含了Highcharts图表库的详细API说明、配置选项、使用示例以及常见问题解答等内容。通过该文档,开发人员可以深入了解Highcharts的各个组件(如图表类型、坐标轴、图例、数据点提示框等)的配置...

    Highcharts&Highstock中文API PDF文件

    中文API文档提供了详细的类、方法、属性和参数说明,例如: - `chart`对象是图表的核心,包含了大部分的公共方法和属性。 - `series`对象代表图表中的一个数据系列,可以设置颜色、类型、数据等。 - `xAxis`和`yAxis...

    highcharts中文帮助文档

    对于更复杂的配置和细节,可以参考Highcharts的官网API文档(***),其中包含了完整的配置项列表和详细的说明。由于文档内容来源于网络,并且部分信息可能由于OCR技术原因存在识别错误,建议用户在实践中对照官网API...

    Highcharts-4.0.4含中文API

    Highcharts-4.0.4含中文API,Highcharts 是一个用纯JavaScript编写的一个图表库,HighCharts特点:1.兼容性:HighCharts采用纯JavaScript编写,兼容当今大部分的浏览器,包括Safari、IE和火狐等等; 2.图表类型众多:...

    highcharts 官网 api离线版

    API文档详细解释了每个函数、方法、属性以及配置选项,使得开发者可以精确地控制图表的显示效果和交互行为。 Highcharts API主要包含以下几个部分: 1. **Series**: 系列对象是图表的核心,代表了一组数据。你可以...

    Highcharts&Highstock中文API PDF

    `Highcharts&Highstock中文API PDF`是这两个库的中文版官方文档,对于学习和使用Highcharts和Highstock非常有帮助。它详细介绍了各个API接口、配置项、方法和事件,以及如何通过这些实现各种图表和特效。PDF中包含...

    highcharts参考文档API

    每个选项都有详细的注释和用法说明,可以在Highcharts的官方文档中找到。 例如,对于轴的配置,你可以指定轴的标题、刻度、网格线等,例如: ```javascript xAxis: { title: { text: '时间' }, labels: { format...

    Highcharts-2.3.3以及英文版API

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

Global site tag (gtag.js) - Google Analytics