Question

我正在尝试在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");

Answer 1

我放弃了使用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中的同心弧

1 个答案: