KendoUI Pie Chart

KendoUI Pie Chart

by petran

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<div id="example" class="k-content">
    <div class="chart-wrapper">
        <div id="chart"></div>
    </div>

JavaScript

var data = [{
    "source": "已使用",
        "percentage": 22,
        "explode": true
}, {
    "source": "未使用",
        "percentage": 27
}];

function createChart() {
    $("#chart").kendoChart({
        title: {
            text: "内存使用情况"
        },
        legend: {
            position: "bottom"
        },
        dataSource: {
            data: data
        },
        series: [{
            type: "pie",
            field: "percentage",
            categoryField: "source",
            explodeField: "explode"
        }],
        seriesColors: ["#42a7ff", "#999999"],
        tooltip: {
            visible: true,
            template: "${ category } - ${ value }%"
        }
    });
}

$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);