Highchart构建横向误差条图

来源:互联网 发布:淘宝购物车的东西少了 编辑:程序博客网 时间:2024/06/05 18:05

Highchart构建横向误差条图

普通误差条图只能表现竖直方向的误差范围。但很多时候,还需要表现该数值在水平方向的误差范围。这个时候,可以使用第三方插件error_bar实现。该插件为用户提供了一个新的图表类型error_bar。使用横向误差条图的过程如下:
(1)从Github下载该插件,网址为https://github.com/youngmd/highcharts-errorbar/archive/master.zip。解压该文件,获取其中的脚本文件highcharts-errorbar.js。
(2)在当前网页中,引入该脚本文件。代码如下:
  • <script src=”highcharts-errorbar.js”></script>
(3)在数据列中指定图表类型为error_bar。代码如下:
  • series:[{
  • type:’error_bar’
  • }]
(4)构建对应的节点。其节点构成语法如下:
  • [x,y,left,right,low,high]
其中,参数x和y指定节点位置;参数left和right指定横向误差值;参数low和right指定纵向误差值。
(5)使用配置项format指定显示模式。其语法如下:
  • format:String
其中,参数String指定显示那条误差线。允许的值包括x(只显示横向误差线)、y(只显示纵向误差现)、xy(同时显示横向和纵向误差线)。默认值为xy。

创建实例效果如下:


横向误差条图

PS:该内容已经加入《网页图表Highcharts实践教程图表篇》v1.2.5中。
0 0
原创粉丝点击