kendoChart自学整理

最新推荐文章于 2023-04-12 11:40:40 发布

lanying100

最新推荐文章于 2023-04-12 11:40:40 发布

阅读量1.4k

点赞数 2

分类专栏：工作随笔文章标签：前端 js

本文链接：https://blog.csdn.net/lanying100/article/details/112984790

版权

本文是作者自学KendoUI的kendoChart组件整理笔记，详细介绍了kendoChart的结构、入门示例，包括柱状图和饼图的配置与展示，并提供了官方网址供深入学习。

摘要由CSDN通过智能技术生成

关于KendoUI的资料不是很多，且访问官网又非常慢。所以啃了一下官方文档之后，把常用的配置细节记录一下。

kendoChart结构说明

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"

最低0.47元/天解锁文章

lanying100

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
kendoChart自学整理

关于KendoUI的资料不是很多，访问网站又非常的卡。啃了一下官方文档，把用到的知识细节记录一下。官方文档：charts一步步入门：https://docs.telerik.com/kendo-ui/controls/charts/overview入门示例1.引入css和js<link href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.common.min.css" rel="stylesheet" />
复制链接

扫一扫

专栏目录