可以調整劍道條形圖來填充屏幕，但不是餡餅還是衡量

我有以下的風格被點擊時，他們應用到我的圖表，它隱藏所有其他div元素，使點擊一看「全屏幕」：可以調整劍道條形圖來填充屏幕，但不是餡餅還是衡量

<style> 
    .hidden { 
       display: none; 
      } 
    .overlay { 
       position: absolute !important; 
       top: 0 !important; 
       left: 0 !important; 
       bottom: 0 !important; 
       right: 0 !important; 
       width: 100% !important; 
       height: 100% !important; 
       } 
    </style>

使用下列內容：

var fullScreen = 0; 

    $('#VehicleStatus').click(function() { 

    if (fullScreen == 0) { 
     var position = $("#VehicleStatus").position(); 
     var leftCoord = position.left; 
     var rightCoord = position.right; 
     var topCoord = position.top; 
     var bottomCoord = position.bottom; 
     $(".all").addClass("hidden"); 
     $("#VehicleStatus").removeClass("hidden"); 
     $("#VehicleStatus").addClass("overlay"); 
     fullScreen = 1; 
    } 
    else { 

     $(".all").removeClass("hidden"); 
     $("#VehicleStatus").removeClass("overlay"); 
     $("#VehicleStatus").css("position", "relative"); 
     $("#VehicleStatus").css("top", topCoord); 
     $("#VehicleStatus").css("bottom", bottomCoord); 
     $("#VehicleStatus").css("left", leftCoord); 
     $("#VehicleStatus").css("right", rightCoord); 
     $("#VehicleStatus").css("width", "500px"); 
     $("#VehicleStatus").css("height", "280px"); 
     fullScreen = 0; 

    } 
})

但是，當我用我的餅圖或儀表之一的ID，他們不工作。計量器只是進入屏幕的左上角並保持其原始大小，餅圖只是刪除頁面上的所有內容。

有沒有人知道我要去哪裏錯了？

來源

2013-04-15 user2248441

你需要調用刷新，請參閱我的例子：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="KendoPieChart.aspx.cs"  Inherits="Demo.KendoPieChart" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="Scripts/jquery.js"></script> 
<script src="Scripts/kendo.all.min.js"></script> 

<style> 
    .smallChart{ width: 200px;} 
    .bigChart{ width: 900px;} 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
    <div id="chartContainer" class="smallChart"> 
     <div id="chart"></div> 
    </div> 


    <div id="resize">Resize</div> 
</form> 


<script> 
    $("#chart").kendoChart({ 
     title: { 
      text: "Break-up of Spain Electricity Production for 2008" 
     }, 
     legend: { 
      position: "bottom" 
     }, 
     seriesDefaults: { 
      labels: { 
       visible: true, 
       format: "{0}%" 
      } 
     }, 
     series: [{ 
      type: "pie", 
      data: [{ 
       category: "Hydro", 
       value: 22 
      }, { 
       category: "Solar", 
       value: 2 
      }, { 
       category: "Nuclear", 
       value: 49 
      }, { 
       category: "Wind", 
       value: 27 
      }] 
     }] 
    }); 


    $('#resize').click(function() { 
     $('#chartContainer').toggleClass('smallChart'); 
     $('#chartContainer').toggleClass('bigChart'); 


     //$("#chart").redraw(); 
     var chart = $("#chart").data("kendoChart"); 
     chart.refresh(); 
    }); 
</script>

來源

2013-04-15 15:03:55

這不是問題。圖表設置爲每隔幾秒鐘讀取數據源，無論如何都刷新圖表。另外，這真的不能解釋爲什麼它適用於條形圖而不是其他 – user2248441

創建示例頁面 –

刷新不是問題。也即時使用剃刀不aspx – user2248441

可以調整劍道條形圖來填充屏幕，但不是餡餅還是衡量

回答

相關問題