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

我想知道我是否可以使用一些javascript库，如、或创建如下图表：

---

它有一个更像甜甜圈形状的自定义圆圈和线条样式，我希望它像图片上的连接点。正如您在图中所看到的，直线在每个点之间都有一个小的边距。

请查看charts.js line charts

您可以使用谷歌图表进行此操作。我承认我只是出于好奇才试过，但它确实有效。您所要做的就是用标准圆点绘制图表，然后在图表完成时（在准备就绪事件中）添加您自己的形状：

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);                  
  })

});   

---

演示：

谢谢！！我还想知道是否有任何网站可以像你一样作为指南或教程来学习如何自定义图形？@nommer我认为没有具体的教程，你必须了解如何工作。我没有太多使用Google图表或SVG，但我运行了他们的示例，看到它将SVG圆圈作为点生成，并简单地添加到图片中。@YuriyGalanter感谢它工作正常，但在我的情况下，我想在特定的图表上应用它。不是所有的图表，可视化是否可能只在特定的图表上应用。