没有合适的资源?快使用搜索试试~ 我知道了~
首页HighCharts Demo以及详细使用
HighCharts Demo以及详细使用
需积分: 1 8 下载量 168 浏览量
更新于2023-03-16
评论 1
收藏 346KB DOC 举报
HighCharts 详细使用及API文档说明,附带小例子,包你物超所值!
资源详情
资源评论
资源推荐
HighCharts 详细使用及 API 文档说明
上篇文章中简单的介绍了 HighCharts 的功能及特点,想必大家对 HighCharts 已经很期待了吧,
那么通过阅读本文,你就可以自己编写代码实现你的漂亮的图表了。
一、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 每部分详细配置:
1、chart :图表区选项
主要设置图表的类型,图表装载容器名,背景,高度,宽度等图表的整体属性。
参数 描述 默认值
backgroundColor
设置图表区背景色
#FFFFF
F
borderWidth
设置图表边框宽度
0
borderRadius
设置图表边框圆角角度
5
renderTo
图表放置的容器,一般在 html 中放置一个 DIV,获取 DIV 的 id 属性值
null
defaultSeriesType
默认图表类型 line, spline, area, areaspline,
column, bar, pie , scatter
0
width
图表宽度,默认根据图表容器自适应宽度
null
height
图表高度,默认根据图表容器自适应高度
null
margin
设置图表与其他元素之间的间距,数组,如[0,0,0,0]
[null]
plotBackgroundCol
or
主图表区背景色,即 X 轴与 Y 轴围成的区域的背景色
null
plotBorderColor
主图表区边框的颜色,即 X 轴与 Y 轴围成的区域的边框颜色
null
plotBorderWidth
主图表区边框的宽度
0
shadow
是否设置阴影,需要设置背景色 backgroundColor
false
re;ow
是否自使用图表区域高度和宽度,如果没有设置 width 和 height 时,会自适
应大小
true
zoomType
拖动鼠标进行缩放,沿 x 轴或 y 轴进行缩放,可以设置为:‘x’,'y’,'xy’
”
events
事件回调,支持 addSeries 方法,click 方法,load 方法,selection 方法等
的回调函数
、
2、colors :数据列颜色选项
主要是数据列颜色设置,比如多条线条中的每个线条颜色。
参数 描述 默认
color
用于展示图表,折线/柱状/饼状等图的颜色,数组形式。
一 组 html 颜 色 代
码
colors: [
'#058DC7
',
'#50B432
',
'#ED561B
',
'#DDDF0
0',
'#24CBE5
',
'#64E572'
,
'#FF9655'
,
'#FFF263'
,
'#6AF9C4
'
]
说明:1、颜色代码为 html 标准,可通过 DW 等复制想要的代
码
2、默认是从第一个数据列起调用第一个颜色代码,有多少个数
据列调用相应数量的颜色
3、当数据列大于默认颜色数量时,重复从第一个颜色看是调用
3、credits :版权链接选项
参数 描述 默认值
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
4、exporting :导出及打印选项
参数 描述 默认值
buttons
打印和导出按钮设置。其中两个按钮中又有很多样式等设置,如有需要
可详细查看 API 文档
默认按钮样式
enableIma
在导出的图片中添加 logo 水印。布尔型,默认是 false
false
剩余11页未读,继续阅读
赵雍
- 粉丝: 3
- 资源: 7
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
- SPC统计方法基础知识.pptx
- MW全能培训汽轮机调节保安系统PPT教学课件.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0