2016-09-12
레퍼런스 : 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]]
위 데이터를 잘 잘라서 표시한 것이다.