heightChatrs

一。highCharts
1简介
学习API:https://www.highcharts.com.cn/docs/basic-charts
https://api.highcharts.com.cn/highcharts
hightCharts是一个纯js编写的图标库,能够更加简单快捷的在web网站上添加交互性图表,支持:直线图,曲线图,面积图,柱状图,饼状体,地域图等18种不同类型的图标
优点:免费开源,兼容比较好,(ie6)纯js开发的,图标类型丰富,具有动态效果,图表可打印,坐标轴可设置,图表可缩放,支持外部加载数据ajax
2.hightCharts基本组成部分
title:标题,包含副标题subtitle,副标题可以没有
series:数据列,图表上一个或多个数据系列
axis:坐标轴,包含x轴(xAxis),y轴(yAxis)
tooltip:数据提示框,当鼠标悬浮在某个数据点上,以图框的形态展示该点数据信息
legend:图例,用不同的颜色和形状文字等表示不同的数据列
credits:图表的版权信息
exporting:图表导出按钮,使用导出功能必须引入exporting.src.js
plotLines:提示线(辅助线)
plotBands:表示区域(分辨带)
3.标题:title
title属性表示标题,其中有text属性为文本内容,style属性表示样式,副标题在标题的下边,可以使用x y调整位置,text表示内容,style表示样式
4.数据列 series
一个图表中可以有多个数据列,所有数据列属性对应的值是一个数组,数组中的成员是对象,每一个对象就对应一个数据列,每个对象都有两个属性:
data:数据列的数值,是一个数组
name:数据列名称,字符串
如果图表纵坐标不设置,纵坐标会根据数据列中的最大值最小值设置数值
name:会在图例和提示条上显示
data:设置比较自由,可以是数字,表示y值,x轴相互对应,可以是数组,数组中第一项表示x轴,第二项表示y值
可以是对象,对象中x属性表示x值,y属性表示y值,还可以添加其他属性,比如color表示该点的颜色
5.坐标轴 xAxis yAxis
xAxis :x轴 yAxis:y轴
categories:x轴的内容
style:设置样式,谁需要就放谁里面
title:设置坐标轴的标题
labels:设置值,通过formatter来格式化值的输出,函数内部的this
6.提示框 tooltip
style:样式
设置内容:1)formatter:渲染这个提示框内部内容
pointFormatter:渲染该点提示框的内容
2)headerFormat:渲染提示框标题
pointFor,at:渲染提示框内容信息
7.图例:legend
与图表中的数据列表示一一对应,是一个对象,可以设置属性,背景颜色使用backgroundColor
8.版权 credits
表示版权信息
text:设置内容
href:设置链接
style:设置样式
enable:隐藏显示
9.数据列颜色:colors
colors:根据数据列顺序设置颜色
10.显示细节 plotOptions
如果设置数据列的细节,可以在series中设置,包含:datalabels,在datalabels设置format和enabled可以进行显示
format:格式化模板
enabled:显示隐藏
语法:plotOptions:{
series:{
dataLabels:{
format:'',
enabled:true,
}
}
}

11.打印图表(国际化)
引入exporting.src.js就可以直接出现打印图表
国际化语法:
lang:{
printChart:"打印图标",
contextButtonTitle:'图标导出菜单',
downloadPNG: '导出为png图片'
downloadJPEG: '导出为jpeg图片',
downloadPDF: '导出为pdf文档',
downloadSVG: '导出为svg图片'
}


12.图表类型:
type:类型
line:直线图(默认)
spline:折线图(曲线)
column:柱状图
pie(饼状图)
more(综合图
area(区域图)
chart属性,里面有一个type

 

转载于:https://www.cnblogs.com/txf-123/p/11550460.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值