Highcharts

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

文章目录
  1. 关于highchart 扩展方法
  2. 给初始化的chart添加一个按钮
  3. #先来个图直观点
  4. #再来段例子的代码
  5. # 代码分析
  6. 小结

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上任何地方画任何自己想填充的图片，图形，文字等。