天天看點

小程式 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繪制曲線圖折線圖,把圓點置于曲線後方,點曲線樣式自定義!

圖二代碼如下:

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()後,就是一樣的道理,就會出現圖一的樣式,希望幫你解決了問題。