如何創建線圖，自定義數據點和線的風格在javascript

Question

我在想，如果我可以使用一些JavaScript庫，例如Google Charts，gRaphaeljs，flotcharts，或d3js創建類似下面的圖表：

它更像是甜甜圈形狀的自定義圓圈，我希望它像連接圖片上的點的線條樣式。正如您在圖像中看到的那樣，線條在每個點之間有一個小的邊距。

Answer 1

您可以使用Google Chart for this。我承認我只是出於好奇才嘗試過，但它確實有效。所有你需要做的就是繪製圖表用標準的圓形點，然後在圖表結束（在ready事件）添加自己的形狀：

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