C3.js中的同心圆弧

问题描述：

我正尝试在C3.js中的圆环图中实现同心圆弧。到目前为止，我已经创建了甜甜圈图表，现在想在甜甜圈内添加另一个弧线，代表篮球运动员制作的三个指标的百分比。C3.js中的同心圆弧

我无法找到C3.js的任何示例。

这里是图的样子： Donut Chart

而且我想补充一点，在尺寸和15PX占地取得三分的百分比另一个弧。这是我迄今为止的代码。

var chart = c3.generate({ 
         data: { 
          columns: [ 
           ['Shots', 50], 
           ['Threes', 50] 
          ], 
          type: 'donut', 
          colors: { 
           Shots: '#ff0000', 
           Threes: '#E8E8EE' 
          }        
         }, 
         donut: { 
           expand: false, 
           label: { 
            show: false, 
            format: function(value, ratio) { 
             console.log("value: " + value) 
             return value; 
            } 
           }, 
           width: 15 
         }, 
         legend: { 
          hide: true 
         }, 
         tooltip: { 
          show: false 
         } 
        }); 

        d3.select(".c3-chart-arcs-title") 
        .append("tspan") 
        .attr("dy", -20) 
        .attr("x", 0) 
        .text("Year: 5"); 

        d3.select(".c3-chart-arcs-title") 
        .append("tspan") 
        .attr("dy", 16) 
        .attr("x", 0) 
        .text("50% Shots Made"); 

        d3.select(".c3-chart-arcs-title") 
        .append("tspan") 
        .attr("dy", 16) 
        .attr("x", 0) 
        .text("25% 3ptrs Made");

答

我放弃了使用C3，因为我找不到可以使其工作的文档。这里是D3.js中的代码，它使两个同心圆弧...这样更容易。

<div id="chart"></div> 

<style> 
         .arc { 
          fill: #00b33c; 
         } 
         .arc2 { 
          fill: #d3d3d3; 
         } 

         .arc3 { 
          fill: #196719; 
         }              
        </style> 

<script type="text/javascript"> 

var shotsMade = .63; 
var shotsMissed = 1 - shotsMade; 
var threePtrs = .50; 

        var svg = d3.select("#chart") 
         .append("svg") 
         .attr("width", 300) 
         .attr("height", 220) 
         .append("g") 
         .attr("transform", "translate(100,100)"); 

        var arc = d3.svg.arc() 
         .innerRadius(90) 
         .outerRadius(100) 
         .startAngle(0) 
         .endAngle(shotsMade * 2 * Math.PI); 

        svg.append("path") 
         .attr("class", "arc") 
         .attr("d", arc); 

        var arc2 = d3.svg.arc() 
         .innerRadius(90) 
         .outerRadius(100) 
         .startAngle(0) 
         .endAngle(-1 * shotsMissed * 2 * Math.PI); 

        svg.append("path") 
         .attr("class", "arc2") 
         .attr("d", arc2); 

        var arc3 = d3.svg.arc() 
         .innerRadius(80) 
         .outerRadius(90) 
         .startAngle(0) 
         .endAngle(threePtrs * 2 * Math.PI); 

        svg.append("path") 
         .attr("class", "arc3") 
         .attr("d", arc3); 

        var textConfirmed = svg.append("text") 
        .attr("dy", "0") 
        .style("text-anchor", "middle") 
        .style('fill', '#196719') 
        .attr("class", "shots") 
        .text("50% Three Ptrs") 
        .attr("y", 12); 

        var textAdherence = svg.append("text") 
        .attr("dy", "0") 
        .style("text-anchor", "middle") 
        .style('fill', '#00b33c') 
        .attr("class", "threePtrs") 
        .text("60% Shots Made") 
        .attr("y", 28); 


</script>

C3.js中的同心圆弧

相关推荐