要使用 Higcharts 最快学会的方法,就是拿着官网给我们的例子,加以分析和修改。
兼容 IE6+、完美支持移动端、图表类型丰富的 HTML5 交互图表 | Highcharts
需求:将基本图表转换为股票图表。修改库存的基本元素。注意范围的位置选择器、按钮数量、内容、初始选择和外观。同时定位菜单和标题。自定义底部的导航。
分析: 基本图表转换股票图表使用Highcharts.stockChart转换,修改库存基本元素stockTools解决定位菜单标题使用相关属性设定具体请看下图
解决:
源代码:
示例:
HighCharts基础股票图以上表为例进行总结:
-
首先将基本图表转换为股票图Highcharts.stockChart
-
添加rangeSelector----范围选择器进行自定义设置
-
导出栏使用exporting. Buttons. contextButton进行设置
-
标题(title)重新定位使用align,x:xx调整x坐标值
-
底部导航自定义使用navigator.series设定形状