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

Question

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

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

Answer 1

您可以为此使用 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/