关于KendoUI的资料不是很多,且访问官网又非常慢。所以啃了一下官方文档之后,把常用的配置细节记录一下。
kendoChart结构说明
入门示例
1.引入css和js
<link href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script> <!-- 这个文件有3.58M -->
2.提供空白div
<div id="chart" style="width: 650px; height: 400px"></div> <!-- 宽高属性可选 -->
3.创建并配置kendoChart
$("#chart").kendoChart({
title: {
text: "Kendo Chart Example"
},
series: [ {
name: "Example Series",
data: [200, 450, 300, 125]
} ],
categoryAxis:{
categories: [ 2000, 2001, 2002, 2003 ]
}
});
完整代码
<!DOCTYPE html>
<html>
<head>
<title>KendoBarCharts自学整理</title>
<meta charset="UTF-8">
<link href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart" style="width: 650px; height: 400px"