Fork me on GitHub

从0开始撸一个支持单轴轮播的雷达图之首篇

引子

最近做公司的数据展示项目,用的核心插件是Echarts,但在雷达图的展示案列上,需求上出现了需要单轴轮播标签和数据,在看完github上的issue后,这个Echarts3不支持,看了一下源码,似乎有点复杂,改了改,只实现了多个series的轮播,和需求还是有差距,周末反正无聊,何不自己动手撸一个。

整理一下思路

clipboard.png

想实现如上图这样一个建议雷达图,需要几步?个人总结,需要:
初始化一个canvas对象;

  1. 以画布中心,绘制三个同心圆;
  2. 根据输入的点数,计算3根轴在外径圆上的6个坐标点,并以中心点,绘制6根轴线;
  3. 根据输入的标签,集合前面6个坐标点,完成6个标签在画布的绘制;
  4. 根据输入的数据,结合前面的6个坐标,计算得输入数据的坐标点,连线完成输入数据展示;
  5. 要实现轮播,主要解决的就是根据输入数据坐标点计算此点在Dom元素的位置,然后轮播显示;
  6. 如果想触发echarts那种hover tooltip的效果,你只需要添加一个mousemove事件,获取位置,并计算其相对应的坐标点。

好像要达到的效果就完成了,似乎不难,来吧,实现它。

分布实现

初始化一块画布

首先引入一个canvas函数,并为其制定长高,然后获取这个元素,并得到一块平面画布,代码如下:

<div id='main' >
    <canvas id='canvas' width='600px' height='400px'></canvas>
</div>

const draw = document.getElementById('canvas');
const ctx = draw.getContext('2d');

为了后面更方便的计算,我们需要把坐标原点从画布的右上角移到画布的中心,所以我们首先获取画布的长宽,接着使用translate方法,转移坐标原点

const offset = {
    x:draw.offsetWidth,
    y:draw.offsetHeight
};
ctx.translate(offset.x/2,offset.y/2);

这样我们就初始化了一块画布,并将其坐标原点移到了画布的中心.
这里提示两点:

  1. 添加canvas为其指定宽高时,需要用width和height属性直接指定,而不能用style的宽高指定其宽高,如果是样式指定,画出来的线或圆是模糊且变形的;
  2. 虽然上面变换了坐标原点,但是canvas坐标系默认是向下,向右为正,所以我们改变了坐标原点,但这个特点并未改变,所以像(0,120)这个点是位于坐标原点正下方的,而非通常我们认知的正上方;

画同心圆

在echarts中,圆的个数可通过splitNum配置,其实这个实现也不难,可通过下面的代码实现:
const m = Math;
const PI = m.PI;//这两个参数后面经常会用,这里提前简单申明

/*
输入参数
*ctx 画布
* radius 要画的最外层圆的半径
* spiltNum 要画的圆的个数
* */
function drawArc(ctx,radius,splitNum){
    ctx.beginPath(); //开始画路径
    /*这个可通过stokeColor与fillColor设置圆边的颜色和圆的填充色*/
    const splitStep =radius/splitNum;
    for(let i=1;i<=splitNum;i  ){ //按splitNum个数,计算并画出相应的圆
        ctx.moveTo(i*splitStep,0); //这一句很重要,你需要手动移动你的画笔,而不是任其在画布上连续移动,画出不应该出现的线;
        ctx.arc(0,0,i*splitStep,0,2*PI,false);
    }
    ctx.stroke();
}
drawArc(ctx,raduis,3);

这一步就提示一点:
ctx.beginPath()与ctx.stroke();总是成对成对出现,缺一个,这线必须出不来。

计算极坐标线与外侧圆的交点

首先回忆一个高中数学知识,已知一个圆的大小,其一条线与O度角直径成x度角,求其这条线沿Y轴正方向与圆的交点,好难,有没有,久了不摸,知识瞬间回到幼儿园,答案是:(r*sin(x),r.cos(x)),答案怎么这么简单,不信,不信你可以用三个和四个点验证,我会说我就干过这事嘛。好了,进入正题,直接上函数,顺便说一句,我们在计算这个点的同时,也可以把标签的坐标点也一起算出来,直接上代码:

let l = 6;  //极坐标点的个数,也急速雷达的维度个数;
const single = 2*PI /l ;//计算偏转角度;
let pointData=[],labelData=[];//声明两个数组,用于存储计算所得的坐标点;
for(let i = 0;i<l;i  ){
    let x = m.sin(i*single),y=m.cos(i*single);
    arcData.push([raduis*x,raduis*y]);
    labelData.push([(raduis 16)*x,(raduis 16)*y]); //这里的16是设置你的标签和你圆周之间的距离值,可以设成一个常量,方便修改;
}
 /*点计算好了,接下来我们需要连接每个点到圆心得连线
输入画布,和要连接的点*/
function drawLine(ctx,data){
    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    for(let i= 0;i<data.length;i  ){
        ctx.moveTo(0,0);//再次提示,你需要手动移动你的画笔,来开启你的下一次画线
        ctx.lineTo(data[i][0],data[i][1])
    }
    ctx.stroke();
}
drawLine(ctx,arcData);

提示:其实绘制这几根极坐标也可以采用坐标变换rotate API来执行,比如这样

rotate(single);
ctx.lingeTo(0,r);

这样也很简单,但为了后面,我们需要知道这些极坐标也圆的交点,这在后面会很有用,但不得否认canvas的translate和retate是两个很好用的方法.

根据前面标签的计算点,绘制标签

canvas文字绘制,涉及到的属性和方法有font(设置字体样式),textAlign(设置左右对齐),textBaseline(设置基线,上下对齐),fillText(文字绘制)直接上代码:

let label= ['卫生','安全','交通','住宿','景点','吃88喝'];
for(let i = 0;i<l;i  ){
label[i] = {
    label:label[i],
    position:labelData[i]
    }
}
function drawText(ctx,data,style) {
    const max = data.length;
    ctx.font = 'bold 14px Arial';
    ctx.textBaseline ='middle'; //这个和textAlign都很重要,决定了整个图的美丑
    ctx.fillStyle ='red';  //style.backgroundColor
    console.log(ctx);
    /*下面这些很重要,至于为什么,自己体会*/
    for(let i=0;i<max;i  ){
        let x= data[i].position[0];
        if((x>=-1)&&(x<=1)){  //由于single值的问题,所以很多时候没有x=0的出现,都是0.000001这种浮点数出现;
            ctx.textAlign ='center';
        }else if(x>1){
            ctx.textAlign ='left';
        }else{
            ctx.textAlign ='right';
        }
        ctx.fillText(data[i].label,...data[i].position);
    }
}
drawText(ctx,label);

提示:strokeText与fillText都可以为文本描边,但strokeText使用效果更好;另外使用fillText时,是使用fillStyle为文字设置颜色属性,而strokeText是采用strokeStyle设置文字颜色属性,很重要

根据输入的点,绘制雷达闭合区域

其实这一步也相当简单,就是根据点计算在响应极坐标上的落点,然后一一连线,然后为封闭区域着色,直接上代码:

let data = [120,50,150,80,100,140];
for(let i = 0;i<l;i  ){
    let ratio = data[i]/raduis;
    pointData.push([arcData[i][0]*ratio,arcData[i][1]*ratio]);
}
function drawRegion(ctx,data) {
    const max = data.length;
    ctx.strokeStyle = 'yellowgreen';
    ctx.fillStyle='rgba(10,50,200,0.5)'; //设置了透明度,这样显得更美观
    ctx.beginPath();
    ctx.moveTo(...data[0]);
    for(let i=0;i<max;i  ){
        ctx.lineTo(...data[i]);
    }
    ctx.lineTo(...data[0]);
    ctx.fill()
    ctx.stroke();
}
drawRegion(ctx,pointData);

也许拐点区域特殊处理,更有味道

Echarts怎么做的,Echarts可以配置拐点样式,那我们也为我们的雷达图加上拐点吧。
如果你想用绘制一个线,并根据拐点圆的大小和切入角度,然后计算出这条线的长度,再绘制这个拐点,然后再接着画线,这样真的很难,有没有简单点的,有,就是投机取巧,绘完线后再绘制拐点,并将这个拐点圆填充,这样看起来就像是我们连着画的啦,但这样也有bug,如果我们没有填充颜色,或者填充的颜色有透明度,那么拐点下两条线相交就可见了,我们的连续绘制假象也就被自己拆穿了。还是上代码把:

function drawPoint(ctx,data) {
    const max = data.length;
    const r= 3;
    ctx.fillStyle='white'; //rgba(10,50,200,0.5)
    ctx.beginPath();
    for(let i=0;i<max;i  ){
        ctx.moveTo(data[i][0] r,data[i][1]);
        ctx.arc(...data[i],r,0,2*PI);
        ctx.fill();
    }
    ctx.stroke();
    drawPoint(ctx,pointData);
}

至此,我们基础的图形就画完了,现在我们要做最重要的一步,也就是轮播了。

做一个简单的自动轮播

还是直接上代码吧,下一篇文章再详说:

let step =-1;
function removeLabel(dom) {
    (dom.querySelectorAll('label').length)&&(dom.removeChild(dom.querySelector('label')));
}
function autoLabel(point){
    removeLabel();
    let label =document.createElement('label');
    label.innerHTML ='show:0999'; //这里先写成定值,后面会详述怎样定制轮播值

    label.style.position='absolute';
    label.style.top=point[1] offset.y/2  'px';
    label.style.left=point[0] offset.x/2 'px' ;
    label.style.border='1px solid yellowgreen';
    label.style.background = 'gray';
    label.style.opacity = '0.5'
    label.style.zIndex = 999;

    dom.appendChild(label);
}
setInterval(function(){
    step = (step 1)%6;
    autoLabel(draw,pointData[step]);
},1000)

好了,至此我们就简单的实现了一个暂时没法定制的雷达轮播图,在下一篇文章我们将会根据这里提到的思想,开发一个与简易版的echarts radar插件。
如果发现有任何叙述不正确之处或有更好的想法,还请指正。
源码地址,经供参考

-------------本文结束感谢您的阅读-------------