antv绘制曲线图折线图,把圆点置于曲线后方,点曲线样式自定义!

最近用antv在小程序绘制图表,出现一个问题,看下图,曲线显示在了小圆点上方,很不美观,需要效果入下下图,小圆点置于最上层,不要被挡住,好了问题说明白了,就来看代码:

图一代码如下:

    chart.point().position('showData*value').style('showControl', {
      
          stroke: 'rgb(222,174,255)',
          fill: '#fff',
          lineWidth: 1,
    }).color('rgb(222,174,255)');
    chart.line().position("showData*value").color("showControl","rgb(222,174,255)"); //绘制折线
    chart.render();
    return chart;
    

图一
antv绘制曲线图折线图,把圆点置于曲线后方,点曲线样式自定义!_第1张图片
图二代码如下:

    chart.line().position("showData*value").color("showControl","rgb(222,174,255)"); //绘制折线
    chart.point().position('showData*value').style('showControl', {
      
          stroke: 'rgb(222,174,255)',
          fill: '#fff',
          lineWidth: 1,
    }).color('rgb(222,174,255)');
    chart.render();
    return chart;

图二antv绘制曲线图折线图,把圆点置于曲线后方,点曲线样式自定义!_第2张图片

怎么样,是不是一看就明白了,我什么都没做,只是吧两行代码调换了一下位置,我自己的理解是,他这个绘图是按你的js逻辑来按顺序绘制的,chart.line()是绘制折线,chart.point()是绘制圆点,你把chart.line()放在chart.point()前,那就是先绘制了曲线,所以图层就在下方,后绘制的圆点自然就显示在了曲线上方,相反吧chart.line()放在chart.point()后,就是一样的道理,就会出现图一的样式,希望帮你解决了问题。

你可能感兴趣的:(小程序,canvas,贝塞尔曲线,前端)