如何在highchart中绘制自定义元素

文章目录
  1. 代码分析

highcharts 为我们提供了丰富的扩展接口,今天就给大家讲讲在highcharts中指定的位置画我们想要的按钮、图片、图形、文字等。

####关于highchart 扩展方法
我们先来看看highchart自身提供的画图扩展方法 Renderer,只有了解了如何画图,我们才能在图表上绘制想要的图形,方法有如下几个,不清楚的可以上官网查看API传送门

  • arc() 用来画弧线图

    参数 (Number centerX, Number centerY, Number outerRadius, Number innerRadius, Number start, Number end)
    centerX和centerY分别对应x,y的坐标,outerRadius 外弧的半径,innerRadius内弧的半径,start和end 通常为 -Math.PI/2,-Math.PI,或者0 表示弧的方向 。

  • circle() 用来画圆形图

    参数(Number centerX, Number centerY, Number radius)
    centerX 表示x轴坐标,centerY表示y轴坐标,radius表示半径

  • g() 用来构建一个群组将元素包裹,参数只有一个 传入 名称即可

    渲染后会默认变成 “highcharts-“+ name

  • image() 用来嵌入一张图片

    参数(String source, Number x, Number y, Number width, Number height)
    source 图片路径,x,y为坐标,width和height为图片的宽和高

  • path() 用来画路径图

    这个方法参数稍微有点复杂,需要参考svg的一些路径命令 ,传统门

  • rect() 用来画区域方形图

    参数(Number x, Number y, Number width, Number height, Number cornerRadius)
    x,y分别为x和y轴坐标,width和height为所画区域的宽高,cornerRadius表示图形的圆角

  • text() 用来画文本字符
    参数 (String str, Number x, Number y)
    x,y分别为x和y轴坐标,str表示需要绘制的字符串文本 ####给初始化的chart添加一个按钮

#####先来个图直观点

#####再来段例子的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(function () {
$('#container').highcharts({
title:{text:"请看左侧的按钮,试着点击按钮"},
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
series: [{
data: [29.9, 71.5, 106.4],name:"peng8"
}]
}, function (chart) { // 此处为图表渲染完毕的回调函数
var group = chart.renderer.g().on("click",function(){
alert("1");
}).add();
chart.renderer.rect(9, 9, 12, 12, 1)
.attr({
'stroke-width': 1,
stroke: 'silver',
fill: '#66707B',
zIndex: 0
})
.add(group);
chart.renderer.path(['M', 10, 10, 'L', 20, 20,'M',20,10,'L',10,20])
.attr({
'stroke-width': 2,
stroke: '#fff',
zIndex: 1
})
.add(group);
});
});

代码分析

看完上面那段代码,我来细说下原理

  1. function (chart){} 是图表渲染完毕的回调函数,然后我们在回调函数里画自己想要的图形。
  2. 首先我们利用g() 方法创建了一个容器组 group,并给group绑定了一个click事件。
  3. 然后接着我们用rect() 方法画了一个矩形区域,坐标(9,9),宽度和高度都为12,圆角设置为1。stroke-width 类似于 边框,用来设置边框的粗细,stroke 为边框的颜色,fill 为画的这个区域填充颜色,zIndex 则为层级,这个画完就出来了一个小正方形在chart的左上角。
  4. 画完正方形,我们需要在正方形里画一个小叉叉,利用path() 方法画一个交叉的线,我们看到path里有这样一串数字 ['M', 10, 10, 'L', 20, 20,'M',20,10,'L',10,20],那它代表什么意思呢?
  • M 表示移动到(moveTo) x,y ,表示 开始点的坐标。M后面的2个10即表示从(10,10)这个点开始。
  • L 直线(lineTo) x,y 当前节点到指定(x,y)节点,直线连接。定义某个点开始画直线,L后面的2个20即表示以前面的M点的坐标为起点 以(20,20)为终点画一条直线,就变成一条反斜杠的直线。
  1. 连贯起来就是 以M(10,10)为起点 到L(20,20)画一条直线,然后接着以M(20,10)为起点到L(10,20)再画一条直线,最后就形成了一个 叉叉图形。

附上DEMO的在线连接地址请猛戳我

####小结
其实大家有闲余时间可以看看SVG的各种属性和用法,对于帮助理解highchart绘图和渲染还是有很大的帮助的。path 是svg绘图里最强大的一个。它有个d属性,highchart最终渲染完毕后 以HTML的形式会变成
<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
d属性里还有很多其他的参数 M,L,V,H,Z 等等。详细用法上面我已经发了svg学习的链接,在来个 传送门

掌握了svg的基本用法及highchart扩展方法,就可以随心所遇在chart上任何地方画任何自己想填充的图片,图形,文字等。