dc.js：條形圖不能顯示

我正在製作一個條形圖，使用Dimensional Charting JavaScript庫dc.js，它基於d3和crossfilter。我是新的dc.js library.i試圖顯示使用csv文件的條形圖，但圖形不能display.please給我適當的解決方案。dc.js：條形圖不能顯示

<html> 
<head> 
<title>dc.js - Bar Chart Example</title> 
<meta charset="UTF-8"> 
<link rel="stylesheet" type="text/css" href="css/dc.css"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script> 
<script type="text/javascript" src="js/d3.js"></script> 
<script type="text/javascript" src="js/crossfilter.js"></script> 
<script type="text/javascript" src="js/dc.js"></script> 

</head> 
<body> 
<div id="volume-month-chart"> 
<span>Days by Gain or Loss</span> 
<a class="reset" href="javascript:gainOrLossChart.filterAll();dc.redrawAll();" style="display: none;">reset</a> 
<span class="reset" style="display: none;">Current filter: <span class="filter"></span>  
</div> 
<script type="text/javascript"> 
var fluctuationChart = dc.barChart("#volume-month-chart"); 
d3.csv("data/morley.csv", function (data) 
{ 

    var dateFormat = d3.time.format("%m/%d/%Y"); 
    var numberFormat = d3.format(".2f"); 

    data.forEach(function (d) { 
      d.Expt = +d.Expt; // coerce to number 
      d.Run = +d.Run; 
     d.Speed = +d.Speed; 
}); 
    var ndx = crossfilter(data); 
    var all = ndx.groupAll(); 
    fluctuationChart.width(420) 
     .height(180) 
     .margins({top: 10, right: 50, bottom: 30, left: 40}) 
     .dimension(fluctuation) 
     .group(fluctuationGroup) 
     .elasticY(true) 
     .centerBar(true) 
    .gap(1) 
    .round(dc.round.floor) 
     .alwaysUseRounding(true) 
     .x(d3.scale.linear().domain([-25, 25])) 
     .renderHorizontalGridLines(true) 
    .filterPrinter(function (filters) 
     { 
      var filter = filters[0], s = ""; 
      s += numberFormat(filter[0]) + "% -> " + numberFormat(filter[1]) + "%"; 
      return s; 
     }); 
     fluctuationChart.xAxis().tickFormat(
     function (v) { return v + "%"; }); 
     fluctuationChart.yAxis().ticks(5); 
     </script>

來源

2014-03-26 pramod24

您是否收到任何錯誤消息？ –

@LarsKotthoff沒有收到任何消息 – pramod24

這看起來像試圖使用從d3.csv回調以外的數據的共同的問題 - 注意，這個函數返回立刻再後來當數據可用時，它會調用回調函數。

所以當你的圖表被渲染時，它沒有數據。嘗試將圖表初始化移入回調。

（用小提琴來驗證它會更容易;;）

來源

2014-03-30 15:00:10 Gordon

dc.js：條形圖不能顯示

回答

相關問題