标签：linechart javascript google-visualization

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

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

解决方法:

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

标签：linechart,javascript,google-visualization
来源： https://codeday.me/bug/20190830/1768107.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。