javascript - How to show values in C3.js in Donut Legend? - Stack Overflow

admin管理员组

文章数量:1333210

here goes a simple example screenshot where you can see a donut chart.

Is it possible to show the real values (not the %-calculated ones) in the legend of the chart like marked with red arrows in the screenshot?

Everybody want's to know "22.7 percent of WHAT" when watching the image, so is there any solution to show the sums (like I faked it in the screenshot - arrows) of the data-rows or maybe the plete sum of all the data-rows?

Regards,

Florian

here goes a simple example screenshot where you can see a donut chart.

Is it possible to show the real values (not the %-calculated ones) in the legend of the chart like marked with red arrows in the screenshot?

Everybody want's to know "22.7 percent of WHAT" when watching the image, so is there any solution to show the sums (like I faked it in the screenshot - arrows) of the data-rows or maybe the plete sum of all the data-rows?

Regards,

Florian

• javascript
• d3.js
• charts
• c3

Share Improve this question Follow edited May 27, 2015 at 15:03 Benjamin Gruenbaum 277k8989 gold badges519519 silver badges514514 bronze badges asked May 27, 2015 at 15:01 mstrd308mstrd308 15411 silver badge77 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can manually edit/adjust the text of the legend by using a D3 selector, as done in the example below. However, depending on the text you change it to, you might have to modify they size/positioning of the label too, i.e. get further into D3 manipulations. But just to do a basic change, see the code sample.

Of course, you could also set the name of the series (the zero-th item of the array) before generating the chart, which would then not need any D3 manipulation. I've done this in the second series/column below.

var cols = [
            ['data1', 30],
            ['data2', 120],
        ];
  
cols[1][0] = "Category C: " + cols[1][1];
  
var chart = c3.generate({
    data: {
        columns: cols,
        type : 'donut'
    },
    donut: {
        title: "Iris Petal Width"
    }
    
});
          
d3.selectAll(".c3-legend-item-data1 text").text("Changed")

<script src="https://cdnjs.cloudflare./ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='chart' />

本文标签： javascriptHow to show values in C3js in Donut LegendStack Overflow