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

Question

我想知道我是否可以使用一些javascript库，如Google Charts ， gRaphaeljs ， flotcharts或d3js来创建如下图表：

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

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/

Answer 2

查看charts.js折线图。 http://www.chartjs.org/docs/#line-chart