Highcharts图表.net版开源,支持webform 和 mvc3,完全开源
Highcharts是一个制作图表的纯Javascript类库,主要特性如下:
- 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等;
- 对个人用户完全免费;
- 纯JS,无BS;
- 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;
- 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库;
- 提示功能:鼠标移动到图表的某一点上有提示信息;
- 放大功能:选中图表部分放大,近距离观察图表;
- 易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表;
- 时间轴:可以精确到毫秒
下载插件
Highcharts下载地址
http://www.highcharts.com/download
jquery下载地址
1、需要引入的脚本
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Content/Highcharts-3.0.9/js/highcharts.js" type="text/javascript"></script>
<script src="../../Content/Highcharts-3.0.9/js/modules/exporting.js" type="text/javascript"></script>
<script src="../../Content/Highcharts-3.0.9/js/highcharts-more.js" type="text/javascript"></script>
2、前端显示片段
$('#canvasDiv').highcharts({
chart: {
type: '@Model[0].Type'
},
title: {
text: '@Model[0].Title'
},
subtitle: {
text: '@Model[0].Subtitle'
},
xAxis: {
categories: @Html.Raw(Model[0].XAxis.CategoriesJson)
},
yAxis: {
title: {
text: '@Model[0].YAxis.Title'
},
labels: {
formatter: function () {
return this.value + '次'
}
}
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: @Html.Raw(Model[0].SeriesJson)
});
3、控制器数据绑定片段
演示效果如下:
实现代码已全部开源
github:
https://github.com/cheng5x/YcHighCharts
oschina.net:
http://git.oschina.net/cheng5x/YcHighCharts
Highcharts图表.net版开源,支持webform 和 mvc3,完全开源的更多相关文章
- highCharts图表入门简介
一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...
- 转:Highcharts图表控件的使用
摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...
- jQuery HighchartsTableHTML表格转Highcharts图表插件
版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highc ...
- highcharts图表插件初探
转载请注明出处:http://www.cnblogs.com/liubei/p/highchartsOption.html HighCharts简介 Highcharts 是一个用纯JavaScrip ...
- Highcharts图表插件的简单使用说明
Highcharts图表控件是眼下使用最为广泛的图表控件.本文将从零開始逐步为你介绍Highcharts图表控件. 通过本文.你将学会怎样配置Highcharts以及动态生成Highchart图表. ...
- highcharts图表中级入门之xAxis label:X(横)坐标刻度值过长截断多行(换行)显示问题说明
在使用highcharts图表的过程中,总会碰到这样一个很是棘手的问题,横坐标刻度值太长,在不换行显示的情况下显得格外拥挤.虽然针对这一问题是可以对其刻度值进行旋转以此来避开显示拥挤问题[如何让hig ...
- 关于Highcharts图表组件动态修改属性的方法(API)总结之Series
Highcharts图表组件内的Series很重要,如果说Categries是其大脑,那么Series就是其心脏.这两者才是Highcharts图表组件的重中之重啊.接下来就为大家介绍关于设置Seri ...
- highCharts图表应用-实现多种图表的显示
在数据统计和分析业务中,有时需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.highCharts可以轻 ...
- 在asp.net中如何自己编写highcharts图表导出到自己的服务器上来
1.准备工作:网上下载highcharts导出的关键dll. 1).Svg.dll:因为highcharts的格式其实就是一个xml,采用svg的方式画图: 2).itextsha ...
随机推荐
- 基于swoole搭建聊天室程序
1. 创建websocket服务器 swoole从1.7.9版本开始, 内置了websocket服务器功能,我们只需几行简单的PHP代码,就可以创建出一个异步非阻塞多进程的WebSocket服务器. ...
- Frames of Reference参考框架
Frames of Reference参考框架 When describing the position and orientation of something (for example, your ...
- Java enum枚举类型
java的枚举类型详解: 简单示例: public enum Color{ RED,BLUE,BLACK,YELLOW,GREEN } 复杂示例(带自定义构造方法与类型) public enum En ...
- Android-广播总结
1.发送广播: 其实发送广播属于隐式意图 1.1.系统发出的广播(有序广播/无序广播) 1.2自己发出的广播(有序广播/无序广播) 2.订阅广播: 2.1.AndroidManifest.xml形式订 ...
- solr特点八:Spatial(空间搜索)
前言 在美团CRM系统中,搜索商家的效率与公司的销售额息息相关,为了让BD们更便捷又直观地去搜索商家,美团CRM技术团队基于Solr提供了空间搜索功能,其中移动端周边商家搜索和PC端的地图模式搜索功能 ...
- 大坑记录 - shell脚本删除操作
背景 jenkins执行去执行shell命令,其中引用了一些jenkins的变量,如${WORKSPACE}这种,因为每次执行jenkins比较慢,于是想复制脚本出来想本地调试一下,直接复制了脚本过来 ...
- CSharp读取json配置文件内容
步骤 读取配置文件转换成字符串,代码如下 string contents = System.IO.File.ReadAllText("config.json"); 注意:该语句会抛 ...
- uploadPreview 上传图片前预览 IE9 索引无效的问题
最近公司的项目用到比较多的上传图片的操作,所以用到了基于jquery的上传前预览的插件 uploadPreview ,后来测试的时候发现在IE9下报索引无效的问题. 异常的产生方式 放一个file控件 ...
- ceph pg_num 数值计算
通常在创建pool之前,需要覆盖默认的pg_num,官方推荐: 若少于5个OSD, 设置pg_num为128. 5~10个OSD,设置pg_num为512. 10~50个OSD,设置pg_num为40 ...
- JavaScript 函数声明,函数表达式,匿名函数的区别,深入理解立即执行函数(function(){…})()
function fnName(){xxxx}; // 函数声明:使用function关键字声明一个函数,在指定一个函数名. //例如:(正常,因为 提升 了函数声明,函数调用可以在函数声明之前) f ...