xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script>
</head>
<body>
<div id="piechart"><svg style="width:450px;height:450px;"></svg></div>
<script>
data_piechart=[{"values": [{"label": "with administration(s)", "value": 51.4},
{"label": "with intergovernmental/regional organization(s)", "value": 37.1},
{"label": "with other entities (e.g. company, university)", "value": 11.4}],
"key": "Serie 1"}
];
nv.addGraph(function() {
var chart = nv.models.pieChart();
chart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data_piechart[0].values;
chart.color(d3.scale.category20c().range());
chart.tooltipContent(function(key, y, e, graph) {
var x = String(key);
var y = String(y) + '%';
tooltip_str = '<center><b>'+x+'</b></center>' + y;
return tooltip_str;
});
chart.showLabels(true);
chart.donut(false);
chart.showLegend(true);
chart.labelType("percent")
chart
.x(function(d) { return d.label })
.y(function(d) { return d.value });
chart.width(600);
chart.height(450);
d3.select('#piechart svg')
.datum(datum)
.transition().duration(500)
.attr('width', 600)
.attr('height', 450)
.call(chart);
});
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js
https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js