hightcharts详细教程
2024-08-29 11:17:59
1、初始化highcharts
var chart = Highcharts.chart('container', options);
2、options 自定义图表的配置项
const options = { chart:{}, // 图表配置(样式,生命周期)等 title: {}, // 图表标题配置项 tooltip: {}, //图表数据的提示框(鼠标放到图表上显示具体数据) legend: {}, // 图例 credits: {}, // 版权标签 exporting: {}, // 导出图表功能 plotLines: {}, // 标示线(平均值线、最高值线) plotBinds: {}, // 可以在图表添加不同颜色区域带,表示出明显的范围区域 xAxis: {}, // 图表x坐标轴 yAxis: {}, // 图表y坐标轴 series: {}, //图表的数据 };
3、chart 配置项详解
chart: {
style: {},// 图表样式
type: '', // 指定图表类型
zoomType: true, //缩放
resetZoomButton: true, // 还原图表正常大小
events: {}, // 图标中各种事件可以写在这里
animation: '', //图表更新时的效果 (初始化时,在plotOptions.series.animations中的设置)
inverted: true, // 让x,y轴显示对调(x与y轴互换位置) }
4、title配置项
title: {
useHTML: true,// 是否title内容使用html
text: '我是图表标题',
style:{}
}
提示: 可以通过实例对象的setTitle()方法设置动态更新或设置图表内容;
5、xAxis 横坐标轴
xAxis: {
title: '横坐标名称',
labels: {
enabled: true, // 是否启用标签
formatter: funciton(){return this.value}, // 格式化标签(对标签进行处理) 还有一些特殊值isFirst、isLast、axis、chart
}, // 横坐标标签
}
最新文章
- TCP协议学习
- git 教程(15)--分支管理策略
- mysql 登录及常用命令
- LoadRunner常见问题整理
- Hello Kraken.js!
- Cocos2d-JS项目之三:使用合图
- 8.css边框
- 应用层HTTP,FTP,TFTP,TELNET,DNS,EMAIL
- Winform控件学习-TreeView
- WinDbug之DUMP蓝屏分析
- 【CSS中width、height的默认值】
- install pip3 for python 3.x
- grok 官方文档
- C++ Primer 学习笔记_45_STL实践与分析(19)--建筑常规算法
- SIMD---MMX代码优化
- MyEclipse设置Console输出到文件
- Java strictfp
- [转载]Oracle PL/SQL之LOOP循环控制语句
- PHP字符串位置相关的函数
- Linux内核分析第二周学习笔记