Можно изменить размер гистограммы Кендо, чтобы заполнить экран, но не пирог или измерить

У меня есть следующий стиль применяется к моим чартам, когда они щелкают, которая скрывает все остальные элементы 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; 

    } 
})

Но когда я использую идентификатор одного из моих диаграмм Pie или Gauges они не работают. Калибр просто идет в верхнюю левую часть экрана и остается его первоначальным размером, а круговая диаграмма просто удаляет все со страницы.

Кто-нибудь знает, где я иду не так?

источник

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

Страница с описанием –

Обновление не является проблемой. Также im использовать Razor не aspx – user2248441

Можно изменить размер гистограммы Кендо, чтобы заполнить экран, но не пирог или измерить

ответ

Смежные вопросы