레퍼런스 :
http://c3js.org/reference.html
c3 그래프 사용시에 legend에는 간단히 표시하고, 툴팁에 자세하게 표시하고 싶을 때가 있을 것이다.
그럴때는 아래와 같이 사용 하면 된다.
<link href="/post_inc/c3js/c3.css" rel="stylesheet" type="text/css" />
<script src="/post_inc/d3js/d3.js"></script>
<script src="/post_inc/c3js/c3.js"></script>
<div id="pie_chart1"></div>
<script>
$(function(){
$.ajax({
type: "POST",
url: "/post_inc/ajax_sleep/c3_data1.php",
data: "n=1",
success: function(msg){
data1 = JSON.parse(msg);
var tmp_names = '';
$.each( data1, function(key, val){
tmp = val[0].split('_');
tmp_names += ',"'+val[0]+'":"'+tmp[0]+'"';
});
tmp_names = '{'+ tmp_names.substr(1) +'}';
tmp_names = JSON.parse(tmp_names);
var pie_chart1 = c3.generate({
bindto: '#pie_chart1'
,data: {
columns: data1
,type : 'pie'
,names: tmp_names
}
,tooltip: {
format: {
name: function(name, ratio, id, index) {
tmp = id.split('_');
return tmp[1];
}
,value: function (value, ratio, id) {
return d3.format('.3%')(ratio)+'('+value+')';
}
}
}
});
}
});
});
</script>
c3_data1.php 페이지에서 넘어오는 데이터는 아래와 같다.
[["simpleData1_detailData1",130],["simpleData2_detailData2",30]]
위 데이터를 잘 잘라서 표시한 것이다.