0

单击图表时，我将以下样式应用于我的图表，它隐藏了所有其他 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 时，它们不起作用。仪表只是转到屏幕的左上角并保持其原始大小，而饼图只是从页面中删除所有内容。

有谁知道我要去哪里错了？

4

1 回答 1

2

你需要调用刷新，请看我的例子：

<%@ 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-15T15:03:55.450 回答