kendoui仪表盘和柱状图 示例
时间： 23:45:08
一说到kendeodui我大家不，这套js在也。
现在一看&仪表盘和柱状图的效果吧：
html和js代码如下：
&!DOCTYPE html&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&title&kendoui DEmo&/title&
&link type=&text/css& rel=&stylesheet& href=&kendoui/mon.min.css& /&
&link type=&text/css& rel=&stylesheet& href=&kendoui/styles/kendo.dataviz.metro.min.css& /&
&script type=&text/javascript& src=&kendoui/js/jquery.min.js&&&/script&
&script type=&text/javascript& src=&kendoui/js/kendo.all.min.js&&&/script&
&div class=&js-gauge& style=& width:250 height:200px&&&/div&
&div class=&js-chart& style=& width:750 height:600px&&&/div&
&script type=&text/javascript&&
var ranges = [{
color: &#F97172&
color: &#FADE71&
color: &#67DF65&
$(&.js-gauge&).kendoRadialGauge({
theme: 'metro',
pointer: {
value: 50,
size: 0.1,
color: &black&
minorUnit: 20,
majorTicks: {
startAngle: -10,
endAngle: 190,
visible: true,
position: &inside&,
rangeSize: 10,
ranges: ranges
$(&.js-chart&).kendoChart({
theme: 'metro',
position: &top&
seriesDefaults: {
type: &column&
series: [{
name: &Accomplishment&,
color: &#67DF65&,
axis: &number&,
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
tooltip: {
visible: true,
format: &{0:p1}&,
template: &#= series.name #: #= kendo.toString(value,'n2') #&
type: &line&,
color: &#B565DF&,
axis: &percent&,
name: &Validated Pipeline Coverage Ratio&,
data: [0.988, 0.733, 0.994, 0.464, 0.52, 0.939, 0.333, 0.245, 0.339, 0.727],
tooltip: {
visible: true,
format: &{0:p1}&,
template: &#= series.name #: #= kendo.toString(value,'p2') #&
valueAxis: [{
name: 'number',
format: &{0:n1}&
visible: false
name: 'percent',
format: &{0:p1}&
visible: false
categoryAxis: {
categories: ['Papua New Guinea Rep Office', 'Papua New Guinea Rep Office', 'Papua New Guinea Rep Office', 'Papua New Guinea Rep Office', 'Validated Pipeline Coverage Ratio', 'Validated Pipeline Coverage Ratio', 'Validated Pipeline Coverage Ratio', 'Validated Pipeline Coverage Ratio', 'Validated Pipeline Coverage Ratio', 'Validated Pipeline Coverage Ratio'],
visible: true
rotation: -75
axisCrossingValues: [0, 10]
tooltip: {
代码相关代码下载http://download.csdn.net/detail/dz1
$T.total > 0 && $T.page <= $T.pageNum}
{#foreach $T.data as r}
{$T.r.formt_tm}{#if $T.r.nickname}{#else}匿名{#/if}
{$T.r.content}
{#if $T.page > 1 && $T.pageNum > 1)
$T.s_num > 2}
{#for index = $T.s_num to $T.e_num}
$T.pageNum > $T.pageNavSize+ 2 && $T.s_num != $T.pageNum - $T.pageNavSize}
{#if $T.pageNum > 1}
{#if $T.pageNum != $T.page && $T.pageNum > 1}
<a href="javascript:void(0);" page="{$T.page 下一页
您的回应...
也许你感兴趣
(window.slotbydup=window.slotbydup || []).push({
id: '2803163',
container: s,
size: '120,270',
display: 'float'
(C)2012 本站提供的内容来源于广大网络用户，我们不保证内容的正确性。如果转载了您的内容，希望删除的请联系我们！原文地址：/articles/angularjs-and-kendoui-your
原作者： Cody Lindley
本周2015 AngularJS 大会在美国犹他州盐湖城举行，Jen Looper 和我
会在AngularJS社区现场回...
原文地址：
本周2015 AngularJS 大会在美国犹他州盐湖城举行， 和
会在AngularJS社区现场回答大家的提问。为了纪念本次大会，我特意写了这篇Q&A，来回答一些比较常见的与Kendo UI和AngularJS相关的一些问题。
如果你觉得有些需要解答问题在本文中没有提到，可以直接在回复中告诉我，我会找一些更合适的人来解答。你也可以直接在大会现场跟我交流。
AngularJS中的指令是什么？如何将Kendo UI与之集成？
AngularJS中的指令（directive）是一种预定义的HTML约定，在AngularJS编译HTML模板时， 编译器会根据这些指令来对HTML进行特定的处理。因为Kendo UI附带了一组自定义的AngularJS指令,所以你可以使用它的HTML属性（即指令）来创建一些Kendo UI的控件。
举个例子，如果要在AngularJS应用中创建一个日期选择控件，你只需要在&input&元素上添加自定义指令（属性）“kendo-date-picker”，当AngularJS HTML编译器在&input&元素上发现这个指令时，就会调用对应的provides来生成一个Kendo UI 日期选择控件。
使用Kendo UI的AngularJS 指令需要多少钱？
Kendo UI的核心指令集是免费且开源的。开发者可以在这里获得源码：。然而，并非所有Kendo UI 控件都是免费用于商业用途的。如果你想在AngularJS应用中使用Kendo UI专业版，你需要获得一个Kendo UI专业许可证（每个开发者最低需要699美元）。如果你想知道哪些控件是开源免费，哪些是需要许可证的，请参照此表：。
Kendo UI需要依赖AngularJS才能运行吗？
Kendo UI并不依赖于AngularJS。然而，你应该知道Kendo UI指令已经集成到kendo.ui.core.js 和
kendo.all.js 文件中了。但是，如果你是通过引入单个独立的控件脚本文件来使用，Kendo UI指令默认是不会集成进来的。你需要再引入指令脚本文件（即 ）才行。
Kendo UI能支持到AngularJS的哪些版本？
Kendo UI 9版本(即2014年的第三次发行版)，可以支持到.
Kendo UI支持AngularJS 2.0吗？
这个问题已经被列入了AngularJS 2.0的开发计划中，但还没有开始执行。我们跟大家一样都很期待和关注。最终的结果是，Kendo UI可以支持AngularJS 2.0。
使用AngularJS 指令需要依赖于JQuery吗？
虽然AngularJS可以不依赖于JQuery，但是Kendo UI不行。所以想要让Kendo UI正常工作必须要引入JQuery，因此Kendo UI的指令肯定需要依赖于JQuery了。
AngularJS 会取代 Kendo UI的 SPA 和 MVVM吗？
不会。虽然Kendo UI 提供了它自己的templating，views，routers，layout，和MVVM工具，但我们并不打算让AngularJS完全取代这些功能，这样Kendo UI就会完全依赖于AngularJS才能运行。创建Kendo UI指令的目的，是为了帮助AngularJS使用者以AngularJS的思维方式来构建高效，快速运行的应用，而不是强制让那些不使用AngularJS的人来使用AngularJS。
如何才能使用Kendo UI AngularJS 指令？
如果你的应用引入了 或
文件，那么你就可以直接用了。正如前面提到的，Kendo UI AngularJS指令已经集成到了这些文件中，你所要做的就是包含angular.js文件来让Kendo UI和Angular一起工作。
&script src="/ajax/libs/jquery/2.0.3/jquery.min.js"&&/script& &!-- 2.0.x --&
&script src="/ajax/libs/angularjs/1.3.14/angular.min.js"&&/script& &!-- 1.3.0 --&
&script src="/1/js/kendo.all.min.js"&&/script& &!-- directives already included --&
谁在维护和支持Kendo UI AngularJS 指令？
这些指令的开发，维护和支持工作不依赖于任何第三方组织和社区，由Kendo UI 团队直接负责这些工作。
Kendo UI提供的所有东西都能和AngularJS兼容吗？
Kendo UI提供了一些与AngularJS相重复的功能，这些功能不应当和AngularJS一起使用。举个例子，当你使用Kendo UI和AngularJS时，应当避免使用Kendo UI的以下功能：
所有的Kendo UI控件都有相应的 AngularJS 指令吗？
是的。你可以通过控件的名称（比如kendoDatePicker() ）来推断出指令的名称。将控件名中驼峰部分的大写字母变成小写，然后在两个单词之间用破折号隔开，就得到了与之对应的指令名称（比如kendo-date-picker）。
Kendo UI移动端控件也支持 AngularJS 吗？
是的。我们还写了一篇详细的教程来说明它是如何运作的：。
我还遗漏了什么？
我不可能预料到所有会出现的问题。所以如果关于Kendo UI 和AngularJS还有什么疑问，请尽管在AngularJS大会上的Kendo UI展台上提出来。如果你届时不在现场的话，也可以在此文的评论部分自由的发表你的观点，我会尽我所能回复的。
此外， 请留意 大会召开的时间是五月1日-3日,地点是波士顿。届时会有专门围绕Kendo UI和AngularJS的主题会议。
===========华丽的分割线============
如果你在大会现场，参加Telerik展台的活动还有机会赢得 Parrot Bebop Drone无人机哦，附上无人机视频介绍地址：（需翻墙）。毕竟，谁不想用航拍技能来看看你最亲密的邻居家后院都发生了些什么事儿呢。放心，我可以肯定，在这种公开性的空间或地表上空航拍是肯定不会违法的。
用云栖社区APP，舒服~
【云栖快讯】12月6日-7日，双11技术大起底！8位阿里技术大神深度解读：前端极限挑战、网络自动化、在线AI推荐应用、超大规模Docker实战、 Buy＋VR购物背后的快速交付、数字大屏的研发经验等。&&
通过机器学习和数据建模发现潜在的入侵和攻击威胁，帮助客户建设自己的安全监控和防御体系，从而解决因网络攻击导致企业...
凝聚阿里巴巴多年来在无线业务安全防御的成功经验和技术成果，并面向开发者和企业提供安全扫描、应用加固、安全组件、数...
是将源站内容分发至全国所有的节点，缩短用户查看对象的延迟，提高用户访问网站的响应速度与网站的可用性，解决网络带宽...
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效率，降低 IT 成本...
云栖大会·广东峰会，物联网先锋业务即将刷新智能世界
Loading...当 React 遇上 KendoUI
当 React 遇上 KendoUI
当 React 遇上 KendoUI
| 分类： ,
| 标签： ,
翻译。未经许可，禁止转载！英文出处：。欢迎加入。
注：React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。
从根本上改变了我对待Web界面的态度。在短期接触ReactJS的时间里，它带给了我从未体会过的惊喜。
让人兴奋的根源，我想是React对待UI的方式和我们之前接触过的不太一样。你不需要直接操作DOM，Readct的组件会渲染一个可视化的DOM。这个可视化的DOM会将它的改变展现出来，并会计算出更新所需要的最少步骤（然后真正地更新了DOM），这一点仅仅是作用在DOM需要改变的部分上（想要了解React reconciliation的机制，请看和）。
到目前为止我使用过的库或者框架都是直接操作DOM的，如果我不想放弃已经在使用UI部件，又想要使用React，我也能这么做吗？
你当然可以咯
当React遇上KendoUI
为了说明这一点，让我们用KendoUI构建一个计量器（Radial Gauge，它还包含了KendoUI slider）来，并将它转换成React组件。你可以点击上面的链接，看一看使用KendoUI和jQuery是如何写出这个效果的（这是非React的方式）。（这里我要提醒大家一下，Radial Gauge是的功能，这个版本是需要支付费用的，比起开源版的KendoUI core专业版提供了很多复杂的部件或可视化效果。你可以看看来对比这两个版本。）
Radial Gauge
首先，创建一个RadiaGauge组件，它可以在DOM中渲染出一个div（这个步骤执行完毕之后，KendoUI部件将会锁定这个元素）：
12345678&// react 0.11 supports namespaced components :)&var Kendo = {};&Kendo.RadialGauge = React.createClass({&&&&&render: function() {&&&&&return &div className="gauge" /&;&&&}&});
不要担心，它不会停在那儿的：）。
React组件有一些，我们将会用到的是componentDidMount。当一个组件第一次被渲染到页面上时，这个方法就会被调用，这时我们就可以操作DOM了。我们可以使用getDOMNode来获取刚刚那个div的引用。
1234567891011121314151617181920&Kendo.RadialGauge = React.createClass({&&&&componentDidMount: function() {&&&&$(this.getDOMNode()).kendoRadialGauge({&&&&&&theme: "silver",&&&&&&pointer: {&&&&&&&&value: 88&&&&&&},&&&&&&&&&&scale: {&&&&&&&&minorUnit: 5,&&&&&&&&startAngle: -30,&&&&&&&&endAngle: 210,&&&&&&&&max: 180&&&&&&}&&&&});&&},&&render: function() {&&&&return &div className="gauge" /&;&&}});
好吧，上面的代码看起来糟糕透了，组件的配置完全是硬编码。我们其实可以将这个配置的值用props来传递，默认值可以用getDefaultProps来使用：
1234567891011121314151617181920212223242526272829&// just showing the relevant methods&Kendo.RadialGauge = React.createClass({&&&&&getDefaultProps: function() {&&&&&return {&&&&&&&theme: "silver",&&&&&&&minorUnit: 5,&&&&&&&startAngle: -30,&&&&&&&endAngle: 210,&&&&&&&max: 180&&&&&}&&&},&&&componentDidMount: function() {&&&&&var props = this.&&&&&$(this.getDOMNode()).kendoRadialGauge({&&&&&&&theme: props.theme,&&&&&&&pointer: {&&&&&&&&&value: props.value&&&&&&&},&&&&&&&&&&&scale: {&&&&&&&&&minorUnit: props.minorUnit,&&&&&&&&&startAngle: props.startAngle,&&&&&&&&&endAngle: props.endAngle,&&&&&&&&&max: props.max&&&&&&&}&&&&&});&&&},&&&// other methods, etc.&});
现在看起来好多了，不过还有最后一道坎要跨。
“有一点很重要：因为我们是在组件渲染之后才开始操作DOM的，KendoUI部件是没法使用ReactJS分析DOM前后不同这个功能。所以我们需要监听部件的改变好及时作出反应。”
我们需要监听props.value的值是否被改变，如果改变了就要重新渲染部件。componentWillReceiveProps和componentDidUpdate这两个方法都能对props.value的改变做出反应。如果我们只是简单的重新渲染KendoUi radial gauge，那就没有办法将那个改变的过程动画化。所以目前我们是这么做的：
12345678910111213141516171819202122232425262728293031323334353637&Kendo.RadialGauge = React.createClass({&&&&&getDefaultProps: function() {&&&&&return {&&&&&&&theme: "silver",&&&&&&&minorUnit: 5,&&&&&&&startAngle: -30,&&&&&&&endAngle: 210,&&&&&&&max: 180&&&&&};&&&},&&&componentDidMount: function() {&&&&&var props = this.&&&&&$(this.getDOMNode()).kendoRadialGauge({&&&&&&&theme: props.theme,&&&&&&&pointer: {&&&&&&&&&value: props.value&&&&&&&},&&&&&&&&&&&scale: {&&&&&&&&&minorUnit: props.minorUnit,&&&&&&&&&startAngle: props.startAngle,&&&&&&&&&endAngle: props.endAngle,&&&&&&&&&max: props.max&&&&&&&}&&&&&});&&&},&&&componentWillReceiveProps: function(nextProps) {&&&&&if(nextProps.value !== this.props.value) {&&&&&&&$(this.getDOMNode()).data("kendoRadialGauge").value(nextProps.value);&&&&&}&&&},&&&render: function() {&&&&&return &div className="gauge" /&;&&&}&});
在componentWillReceiveProps中，如果发现部件发生改变，那么部件中的某个值会变化，KendoUI会动画化这个改变的过程。
从React角度上来看，RadialGauge组件就是渲染出一个div，所以监听它的props改变只是微不足道的性能消耗。（对于componentWillReceiveProps来说，DOM的改变不一定会触发KendoUI部件的更新。）但是如果你的组件渲染方法比较复杂，那最好还是要有shouldComponentUpdate。
现在让我们给轮播创建一个组件。第一步：渲染一个div，在componentDidMount调用这个组件：
1234567891011121314151617181920212223&Kendo.Slider = React.createClass({&&&&&getDefaultProps: function() {&&&&&return {&&&&&&&min: 0,&&&&&&&max: 180,&&&&&&&showButtons: false&&&&&};&&&},&&&componentDidMount: function() {&&&&&var props = this.&&&&&$(this.getDOMNode()).kendoSlider({&&&&&&&min: props.min,&&&&&&&max: props.max,&&&&&&&showButtons: props.showButtons,&&&&&&&value: this.props.value&&&&&});&&&},&&&render: function() {&&&&&return &div /&;&&&}&});
这里有一点不同。
事件（Events）
我们需要处理由于用户的输入导致轮播的值出现变化的情况。因为现在处理的是一个由React产生的事件，我们需要提供一个事件处理程序给这个KendoUI部件。还有一点要注意：如果这个组件从DOM中被移除了，那相应的事件处理程序也要移除掉，这个可以让componentWillUnmount来做。
混合（Mixins）
在Slider组件中，我还用到了React的。当一个子控件要通知其他控件它的值发生改变的时候，可选的方法并不多。我使用的是，这个方法可以使得我的组件值发生改变的时候告诉给其他组件（其他组件要监听这个值）：
1234567891011121314151617181920212223242526272829303132333435&Kendo.Slider = React.createClass({&&&mixins: [React.postal],&&&getDefaultProps: function() {&&&&&return {&&&&&&&min: 0,&&&&&&&max: 180,&&&&&&&showButtons: false&&&&&};&&&},&&&componentDidMount: function() {&&&&&var props = this.&&&&&$(this.getDOMNode()).kendoSlider({&&&&&&&min: props.min,&&&&&&&max: props.max,&&&&&&&showButtons: props.showButtons,&&&&&&&value: this.props.value,&&&&&&&change: this.handleChange&&&&&});&&&},&&&componentWillUnmount: function() {&&&&&$(this.getDOMNode()).data("kendoSlider").destroy();&&&},&&&handleChange: function(e) {&&&&&this.publish("change.speed", { speed: e.value });&&&},&&&render: function() {&&&&&return &div /&;&&&}&});
请注意，我们在componentWillUnmount方法中调用了destroy()，这一步很重要。
再多说一点
难道就停在gauge和slider这里了吗？我想要用“传统的”React组件来展示这个，所以现在你会在页面上看到一个下拉菜单，菜单中的两个选项是两种不同的测量方式。
UnitOfMeasure Component
UnitOfMeasure组件使用了messaging mixin来展现所选择的值的改变。
12345678910111213141516&var UnitOfMeasure = React.createClass({&&&&&mixins: [React.postal],&&&handleChange: function(e) {&&&&&this.publish("change.uom", {&&&&&&&uom: $(this.getDOMNode()).val()&&&&&});&&&},&&&render: function() {&&&&&return &select className="uom-select" onChange={this.handleChange}&&&&&&&&&option&MPH&/option&&&&&&&&&option&KPH&/option&&&&&&&/select&;&&&}&});
SpeedDisplay Component
这个组件没有什么好解释的，它唯一的功能就是将文本展现在div中。
1234567&var SpeedDisplay = React.createClass({&&&&&render: function() {&&&&&return &div className="speed-display"&&&&&&&&{ this.props.speed + " " + this.props.uom }&&&&&&/div&;&&&}&});
所有代码整合起来
KendoExample组件包含了两个变量：speed和uom。这个组件会被UnitOfMeasure和Kendo.Slider影响，当上述的两个组件中的任意一个产生了新的信息，KendoExample都会调用setState。
1234567891011121314151617181920212223242526272829303132&var KendoExample = React.createClass({&&&mixins: [React.postal],&&&getInitialState: function() {&&&&&return {&&&&&&&speed: 88,&&&&&&&uom:"MPH"&&&&&}&&&},&&&componentWillMount: function() {&&&&&this.subscribe("change.#", function(data) {&&&&&&&this.setState(data);&&&&&});&&&},&&&componentWillUnmount: function() {&&&&&this.disposeSubscriptions();&&&},&&&render: function() {&&&&&return &div&&&&&&&&&div className="container"&&&&&&&&&&&Kendo.RadialGauge value={this.state.speed} /&&&&&&&&&&&Kendo.Slider value={this.state.speed} id="gauge-slider" channel={this.props.channel} /&&&&&&&&&&&UnitOfMeasure channel={this.props.channel} /&&&&&&&&&/div&&&&&&&&&SpeedDisplay speed={this.state.speed} uom={this.state.uom} /&&&&&&&/div&;&&&}&});
你可以在看到演示结果。
我希望你觉得这篇文章很有用。如果你想要了解React和别的库是如何结合使用的，可以看和。
（React的天才开发人员之一）评议了这篇文章并关于RadialGauge组件这点，他倾向使用componentWillReceiveProps来比较新旧props，然后看情况更新DOM。原先更新radial gauge是在componentDidUpdate中完成的，现在我把componentWillReceiveProps的方法更新到例子中了。React的开发团队很友善，所以不要害怕向他们提问。
关于作者：
网站 (请以 http://开头)
(*) 表示必填项
发表评论：
馆藏&21040
TA的最新馆藏kendoUI的js包会不会太大了啊 - 开源中国社区
当前访客身份：游客 [
当前位置：
kendo.web.min 文件已经达到877K了，与我之前用的easyUI相比多了差不多500K
这个对web影响不小，大家怎么看
共有1个答案
<span class="a_vote_num" id="a_vote_num_
可按需加载
更多开发者职位上
有什么技术问题吗？
类似的话题