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、需要引入的脚本
1 2 3 4 | <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、前端显示片段
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | $( '#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
----------------------------
用心做产品 name:5+x
----------------------------
用心做产品 name:5+x
----------------------------
分类:
.net
, asp.net mvc
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?