highcharts注释功能

注释功能

如果大家用过echarts2.0的画辅助线功能，可以选择highcharts的这个注释功能可以画线，而且还可以添加文字等，功能更强大了。因为echarts3.0没有画线辅助线功能，逼着本人使用highcharts，用了一段时间以后觉得highchart还很好使。

先给大家看下效果图。

 

安装

像任何其他的Highcharts模块（例如导出）一样，添加<script>标签指向annotations.js  下边是Highcharts的脚本标签。

<script src="./annotations-master/js/annotations.js"></script>

对于NPM用户：

var Highcharts = require('highcharts'),
    HighchartsAnnotations = require('annotations')(Highcharts);

 

示例代码

new Highcharts.Chart({
  chart: {
    renderTo: container
  },
  series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
  }],
  annotations: [{
    xValue: 4,
    yValue: 125,
    title: {
        text: "Annotated chart!"
    },
    events: {
        click: function(e) { console.log("Annotation clicked:", this); }
    }
  }]
})

可用选项

图表选项

选项	描述
chart.annotations	包含注释配置对象的数组
chart.annotationsOptions	注释的默认选项（如按钮列表）

 

注释配置对象 

 

选项	描述
x  y	以像素定义的注释位置
xValue  yValue	使用轴值定义的注释位置
xValueEnd  yValueEnd	路径。而不是定义路径，设置这些值以使注释可扩展
xAxis  yAxis	轴索引，默认为0
anchorX  anchorY	定义注释锚点，可用值： anchorX：“left”/“center”/“right” anchorY：“top”/“middle”/“bottom”
allowDragX  allowDragY	允许用户拖放注释。水平和垂直。
linkedTo	链接注释到点或系列使用它的id
title	标题配置对象
title.text	标题文字
title.x  title.y	相对于注释位置的标题位置（以像素为单位）
title.style	标题的其他CSS样式
title.style.color	标题文字颜色
title.style.fontSize	标题字体大小
shape	形状配置对象
shape.type	形状类型，可用类型"path"，"circle"并且"rect"
shape.units	定义形状是使用像素还是轴值
shape.params	形状参数（参数传递给渲染器方法，如rect，circle或path）
events	支持的事件对象有：mouseover, mouseout, mousedown, mouseup, click, dblclick。this在回调中是指注释对象。
selectionMarker	所选注释的样式默认为： { 'stroke-width': 1, stroke: 'black', fill: 'transparent', dashstyle: 'ShortDash', 'shape-rendering': 'crispEdges' }

 

可用的形状参数

选项	描述	仅限于
shape.params.x  shape.params.y	相对于注释位置的形状位置	直角 圈
shape.params.width  shape.params.height	矩形宽度和高度（仅适用于"rect"类型）	矩形
shape.params.d	路径定义（仅适用于"path"类型）	路径
shape.params.r	圆半径	圈
shape.params.fill	填充颜​​色，默认值： "transparent"	-
shape.params.stroke	笔画颜色，默认值： "black"	-
shape.params.strokeWidth	行程宽度（和路径的行宽），默认值： 2	-

 

图表注释方法

属性	描述
chart.addAnnotation（选项）	添加一个带有给定选项的注释
chart.redrawAnnotations（）	重绘所有注释
chart.annotations.allItems	包含所有注释的数组

 

 注释对象方法

属性	描述
annotation.update（选项）	使用给定选项更新注释
annotation.destroy（）	破坏注释
annotation.show（）	显示注释 - 仅用于未链接的注释
annotation.hide（）	隐藏注释 - 仅用于未链接的注释
annotation.select（）	通过添加选择框选择注释
annotation.deselect（）	通过删除选择框取消注释

 

图表注释配置

属性	描述
enabledButtons	启用或禁用用于绘制注释的按钮。 所选按钮防止缩放和平移以绘制注释。
buttonsOffsets	数组中按钮的偏移量：[x-offset, y-offset]。在导出模块旁边放置注释等时很有用。默认为[0, 0]。
buttons	按钮阵列 例如： { annotationEvents：{step：callback，//在鼠标拖动期间调用新的注释stop：callback//在鼠标向上/释放之后被调用 }，annotation：{//标注注释选项，用于新的注释 anchorX：'左'， anchorY：'top'， xAxis：0， yAxis：0，shape：{type：'path'，params：{ d：['M'，0，0，'L'，100,100] } } }，symbol：{//按钮符号选项shape：'rect'，//shape，取自Highcharts.s符号size：12，style：{ 'stroke-width'：2，'stroke：'black'fill：'red'， zIndex：121 } }， style：{// buton style本身fill：'black'，stroke：blue strokeWidth：2， }， size：12，// buton sizestates：{//按钮的状态 selected：{fill：'＃9BD' }，hover：{file：'＃9BD' } } }

 

 

这是从highcharts的官方插件自己学习了。

官方插件github地址：

https://github.com/blacklabel/annotations

大家可以下载源码测试一下。

谢谢。