kendo column chart
目录
1、用js操作chart,
2、tooltip template鼠标悬浮显示内容,
3、双坐标轴,axisCrossingValues: [0, 30],3指的是跨越横坐标轴标签项数,显示在右侧
4标签永远在下边,categoryaxis里多加个series-axis,valueAxes里加个 axisCrossingValue: [0, @int.MinValue]
5、更新数据
6、全部代码
7、图中只有一种柱,统一设置颜色,用.Column().Color("#5EB6E4")
@(Html.Kendo().Chart<ChartSeriesModel>()
.Name("equipmentChart")
.Title(Resources.RegionEquipmentReportMachineTotal)
.Legend(legend => legend.Visible(false))
.DataSource(ds => ds.Read(read => read.Action("GetEquipmentTotalData", "ReportManage")))
.SeriesDefaults(seriesDefaults => seriesDefaults
.Column().Color("#5EB6E4")
)
.Series(series => series.Column(model => model.Value,null, model => model.Category, null))
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}")
)
1、用js操作chart,
2、tooltip template鼠标悬浮显示内容,
3、双坐标轴,axisCrossingValues: [0, 30],3指的是跨越横坐标轴标签项数,显示在右侧
4标签永远在下边,categoryaxis里多加个series-axis,valueAxes里加个 axisCrossingValue: [0, @int.MinValue]
categoryAxis: [{
line: {
visible: false
},
name: 'series-axis',
axisCrossingValues: [0, 30]
}, {
line: {
visible: false
},
categories: otherCategoryData,
name: 'label-axis',
axisCrossingValues: [0, 30]
}
],
5、更新数据
$("#chartType").data("kendoChart").options.series[0].data = [
{
category: "500万元以下",
value: firstLayerAmount,
color: "#CCFFCC"
}, {
category: "500-1000万元",
value: secondLayerAmount,
color: "#99CCCC"
}, {
category: "1000-2000万元",
value: thirdLayerAmount,
color: "#9999CC"
}, {
category: "2000-5000万元",
value: fourthLayerAmount,
color: "#CC99CC"
}
];
$("#chartType").data("kendoChart").refresh();
6、全部代码
$("#otherChart").kendoChart({
title: {
text: verticleCompareField + "利润总额其他方面分布图"
},
legend: {
position: "top"
},
tooltip: {
visible: true,
template: '#= series.name #: #= value #'
},
series: [
{
name: "利润总额",
type: "column",
data: otherAmountData,
axis: "amount"
},
{
name: "企业数量",
type: "column",
data: otherCountData,
axis: "companyCount"
}
],
valueAxes: [
{
title: { text: "万元" },
name: "amount",
color: "#ff6800",
axisCrossingValue: [0, @int.MinValue]
}, {
name: "companyCount",
title: { text: "家" },
color: "#a0a700",
axisCrossingValue: [0, @int.MinValue]
}
],
categoryAxis: [{
line: {
visible: false
},
name: 'series-axis',
axisCrossingValues: [0, 30]
}, {
line: {
visible: false
},
categories: otherCategoryData,
name: 'label-axis',
axisCrossingValues: [0, 30]
}
],
pannable: {
lock: "y"
},
zoomable: {
mousewheel: {
lock: "y"
},
selection: {
lock: "y"
}
}
});
}
};
kendo column chart的更多相关文章
- Highcharts - Bar Chart & Column Chart
1. 条形图(Bar Chart)需要的数据格式类型如下: ["Luke Skywalker", "Darth Vader", "Yoda" ...
- [D3] Build a Column Chart with D3 v4
Column and bar charts are staples of every visualization library. They also make a great project for ...
- Hello Stacked Column Chart
<navigation:Page xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/to ...
- Displaying Data in a Chart with ASP.NET Web Pages (Razor)
This article explains how to use a chart to display data in an ASP.NET Web Pages (Razor) website by ...
- 矢量Chart图表嵌入HTML5网络拓扑图的应用
使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发者有 Chart 需求的项目的时候,感觉很痛苦,HT 集成的 Chart 组件中,并不包含有坐标,在展现方面不是很直观,但是 ...
- Chart Style
How to add label to column chart http://blogs.msdn.com/b/delay/archive/2009/07/27/simple-column-labe ...
- [Ext JS 4] 实战Chart 协调控制(单一的坐标,两个坐标)
前言
- flex stacked column graph
Flex: Stacked column chart – programmatically in actionscript By bishopondevelopment I was looking f ...
- [D3] Animate Chart Axis Transitions in D3 v4
When the data being rendered by a chart changes, sometimes it necessitates a change to the scales an ...
随机推荐
- 根据json对象的值替换json数组里的值
功能: var fruitArry=[{name:'durian'},{name:'peach'},{name:'banana'},{name:'pitaya'},{name:'apple'},{na ...
- Protocol Buffers java
Protocol Buffers https://developers.google.cn/protocol-buffers/ 一. 例 addressbook.proto. syntax = &qu ...
- pycharm 里面引用pymysql
import pymysql db =pymysql.connect(host ='192.168.1.131',port=3306,user='jack',password ='jack',db = ...
- !important:element.style 覆盖样式问题
问题: 浏览器F12看到是这个样子. 但是我设置的样式是这样子. #iframe_close { width:750px; } 无论怎么设置样式,都无法覆盖掉element.style的样式,widt ...
- Android图表开发——AChartEngine
Android图表控件的开发 曾经开发过一个小程序,在Android电视机上面开发一个APP,用于显示一些统计图表的信息.最后找来找去基于Android Native开发有AChartEngine现成 ...
- Java秒杀简单设计一:搭建springboot环境
项目参考:慕课网 https://www.imooc.com/learn/587 Java秒杀 开发环境 JDK1.8.Maven.Mysql.Eclipse.SpringBoot2.0.5.myb ...
- C++和Java中的静态Static用法
C++和Java中都有的一个静态关键字Static,可以放在类中的变量或者函数之前,就成了静态变量或者静态函数. 静态变量又分为静态全局变量和静态局部变量,可参见网上大神总结的C++全局变量,局部变量 ...
- mysql max(),min()的优化
Select tables optimized away(选择表优化)
- 关于keyGenerator,KeyPairGenerator,SecretKeyFactory的解析
Java加密的常用的加密算法类型有三种 1单向加密:也就是不可逆的加密,例如MD5,SHA,HMAC 2对称加密:也就是加密方和解密方利用同一个秘钥对数据进行加密和解密,例如DES,PBE等等 3非对 ...
- JNUOJ 1184 - 科学计数法
花了半个小时,强行拗出一长串又臭又长的代码,把所有情况都分了(该分的,不该分的……都分了……) #include<cstdio> #include<cstring> #incl ...