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

时间:2020-9-14 作者:admin

最近用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绘制曲线图折线图,把圆点置于曲线后方,点曲线样式自定义!
图二代码如下:

    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绘制曲线图折线图,把圆点置于曲线后方,点曲线样式自定义!

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。