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