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

你們能夠下載源碼測試一下。

謝謝。