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
}, // 横坐标标签
}

最新文章

  1. TCP协议学习
  2. git 教程(15)--分支管理策略
  3. mysql 登录及常用命令
  4. LoadRunner常见问题整理
  5. Hello Kraken.js!
  6. Cocos2d-JS项目之三:使用合图
  7. 8.css边框
  8. 应用层HTTP,FTP,TFTP,TELNET,DNS,EMAIL
  9. Winform控件学习-TreeView
  10. WinDbug之DUMP蓝屏分析
  11. 【CSS中width、height的默认值】
  12. install pip3 for python 3.x
  13. grok 官方文档
  14. C++ Primer 学习笔记_45_STL实践与分析(19)--建筑常规算法
  15. SIMD---MMX代码优化
  16. MyEclipse设置Console输出到文件
  17. Java strictfp
  18. [转载]Oracle PL/SQL之LOOP循环控制语句
  19. PHP字符串位置相关的函数
  20. Linux内核分析第二周学习笔记

热门文章

  1. Android 音视频深入 十六 FFmpeg 推流手机摄像头,实现直播 (附源码下载)
  2. implode() 数组元素组合函数
  3. 获取Promise的值
  4. Java实现post和get请求
  5. Floyd判断环算法总结
  6. JavaScript “函数重载”
  7. GridControl 主从模式(Master-detail)子表格获取行数据
  8. ecplise中设置字符编码
  9. 详解angular2组件中的变化检测机制(对比angular1的脏检测)
  10. 基于IntelliJ IDEA开发工具搭建SSM框架并实现页面登录功能详细讲解二