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

Question

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

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

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