如何使用javascript中的自定义数据点和线条样式创建折线图

我想知道我是否可以使用像Google Charts,gRaphaeljs,flotcharts或d3js这样的javascript库来创建如下图表：

它有更多的自定义圆圈,如甜甜圈形状和线条样式,我希望它像连接图片上的点.正如您在图像中看到的那样,每条点之间的线条间距很小.

解决方法:

您可以使用Google Chart进行此操作.我承认我只是出于好奇而尝试过,但确实有效.您所要做的就是使用标准圆点绘制图表,然后在图表完成时(在准备好的事件中)添加您自己的形状：

google.visualization.events.addListener(chart, 'ready', function(){
     // Looping thru every standard point
     $('circle').each(function() {
                  var $c = $(this);

        // addinng outer circle                      
        var circles = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        circles.setAttribute("cx",$c.attr('cx'));
        circles.setAttribute("cy",$c.attr('cy'));
        circles.setAttribute("r",$c.attr('r'));
        circles.setAttribute("fill",$c.attr('fill'));
        circles.setAttribute("stroke",'white');                  
        circles.setAttribute("stroke-width",'3');                  
        this.parentElement.appendChild(circles);

        // addinng inner circle                                            
        circles = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        circles.setAttribute("cx",$c.attr('cx'));
        circles.setAttribute("cy",$c.attr('cy'));
        circles.setAttribute("r", "4");
        circles.setAttribute("fill","white");
        this.parentElement.appendChild(circles);                  
  })

});   

演示：http://jsfiddle.net/focnsyu9/1/

标签：linechart,javascript,google-visualization
来源： https://codeday.me/bug/20190830/1768107.html