dc.js의 원형 차트 범례가 표시되지 않습니다.

저는 dc.js에서 원형 차트 범례를 만들려고합니다. 그러나 전설은 없습니다. 그냥 ... 나타나지 않는다. 전설 명령을 사용하기 전에 모든 것이 나타납니다. 여기 dc.js의 원형 차트 범례가 표시되지 않습니다.

.legend(dc.legend().x(80).y(70).itemHeight(13).gap(5));

는 관련 코드의 나머지 부분입니다 : 여기

Here is the JSBin

는 전설 코드 내가 this tutorial에서 내 전설 코드를 얻고있다

var companyDimension = data.dimension(function(d) {return d.company;}); 
    var totalSalesByCompany = companyDimension.group().reduceSum(function(d) {return d.total;}); 
    var pieChartCompanySales = dc.pieChart("#pie-chart-sales-by-company"); 
    pieChartCompanySales 
    .width(150).height(150) 
    .dimension(companyDimension) 
    .group(totalSalesByCompany) 
    .legend(dc.legend().x(80).y(70).itemHeight(13).gap(5)); 

    dc.renderAll();

하고, 체크 아웃하는 것 같습니다 official docs. 내가 도대체 뭘 잘못하고있는 겁니까?

출처

2014-06-12 Jeffrey Biles

내가 잘못 생각한 것 같지 않습니다. 사용중인 dc.js 버전의 문제입니다. http://jsbin.com/xasenusu/1/을 확인하십시오. 나는 dc.js의 버전을 변경했으며 div에 svg에 약간의 공간을 주었다.

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.min.js"></script> 
    <script type="text/javascript" src="http://dc-js.github.io/dc.js/js/dc.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    <style> 
    #pie-chart-sales-by-company svg{width:350px;}</style> 
</head> 
<body> 

<div id="pie-chart-sales-by-company"></div> 
</body> 
</html>

출처

2014-06-13 15:35:03

바로

f.forEach(function(item) { $("#precos-legenda").append("<div id=" + item.key + " class='elemento-legenda'><div class='quadradinho' style='background: " + cores_legenda[item.key] + "'></div> <div class='texto-legenda'>" + item.key + "\t\t\t (" + (item.value/total * 100).toFixed(1) + "%) " + "</div></div>"); });

HTML은 파이 차트의 전설은 아직 개발 2.0에 추가되었다. https://github.com/dc-js/dc.js/pull/396 – Gordon

나를 위해,이 솔루션은 작동하지 않습니다. 그래서 저는 수동으로 전설을 개발했습니다. 각 값에 대해 색상 및 비율을 나타내는 CSS를 몇 개 넣었습니다. 이것은 최고의 해결책이 아니지만 작동합니다. 곧 버전 2.0이 안정되기를 바랍니다!

CSS

#precos-legenda { 
    float:left; 
    width: 150px; 
    height: 150px; 
    text-align:left; 
} 

.quadradinho{ 
    width: 13px; 
    height: 13px; 
    background: #ff7373; 
    float:left; 
} 

.elemento-legenda{ 
    display: table-row; 

}

<div class="chart-stage"> 
     <div id="precos-chart"></div> 
     <div id="precos-legenda"> 

    </div>

출처

2015-06-28 20:46:15 anapaulagomes

dc.js의 원형 차트 범례가 표시되지 않습니다.

답변

관련 문제