2017-05-15 34 views
0

我顯示如下所示向上使用D3圓環圖一些數據,但是當我切換到移動視圖,圖表是不可見的我正確如何使它工作或使其顯示移動視圖中的整個甜甜圈和細節?D3圓環圖中不可見完全當在移動視圖

enter image description here

var width = $(".chart-time-spent").width(), height = 250, radius = Math.min(width, height)/2, legendPosY = (height/2) - 20; 
 
    
 
      var color = d3.scale.ordinal().range(["#99ecf0", "#1cb5bb", "#10538c", "#75c6f3", "#60d3ff", "#4ec3d7", "#37c2a5", "#8bcb6b"]); 
 
      var API = apiUrl+"getDeviceCounters"; 
 

 

 
      console.log("deviceController api_> "+API); 
 

 
      var arc = d3.svg.arc().innerRadius(radius - 20).outerRadius(radius - 60); 
 
      var arcOver = d3.svg.arc().outerRadius(radius - 18).innerRadius(radius - 62); 
 
      
 
      var pie = d3.layout.pie().sort(null).value(function (d) { return parseInt(d.time); }); 
 
      
 
      
 
      var svg = $rootScope.getDonutSVG(".chart-time-spent", width, height);
<div class="col-md-6 col-xs-12 chart-total-users"></div>

+0

您已經標記了jQuery的移動,但它看起來像你可能會使用引導?你可以創建一個jsFiddle或codepen來重現問題嗎? – ezanker

+0

我不能創建一個堂妹它簡單地 –

回答

0

我假設你設置圖表的大小,一旦當頁面獲取呈現。

當設置你要聽來調整,使您的圖表響應靜態值:

我沒有收到「排行榜時間之間的關係: https://api.jquery.com/resize/jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?調整大小時結束也許只有重新呈現) -spent」和你的‘排行榜總用戶’

我設置有引導和D3小提琴,以及你的基本變量:

var width = $(".chart-time-spent").width(), 
    height = 250, 
    radius = Math.min(width, height)/2, 
    legendPosY = (height/2) - 20; 

https://jsfiddle.net/772n9mrn/6/

如果調整大小並不能解決你的問題,設法在那裏描述它。

+0

它不工作與我的問題是,我想移動圖形這是對COL-XS-12動一動向左,因爲它是不可見的整個(即使不會工作它應該在移動視圖中完美呈現一切)。 –

+0

「我得不到的關係‘ 排行榜時間花在’和你的‘排行榜總用戶’,他們是不相關的,這些都是正在顯示2圓環圖的名稱 –