`
380071587
  • 浏览: 440489 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

在ASP.NET中使用Highcharts js图表

 
阅读更多

从事过ASP.NET开发的可能都会接触到一些图表控件,比如OWC、ZendGraph等等,这些控件都有一个特点,那就是我们可以像操作.NET中的对象一样控制它们的某些属性,有可能在本地开发好了上传到服务器端部署运行的时候会出现权限问题而导致不能正常运行。本篇周公讲述一个JavaScript的图表控件,不要小看了这个JavaScript图表控件,它能生成各种常见的图表。
Highcharts是一个JavaScript的图表控件,它的官方网站网址是:http://www.highcharts.com/,参考手册网址是:http://www.highcharts.com/ref/,示例网址是:http://www.highcharts.com/demo/。要想简单使用它的图表功能,只需要两个JS类库即可,一个是jquery的,另外一个就是它本身的。但是如果需要支持主题和导出图表功能,就需要更多的JS类库支持了。本篇只讲述满足大多数要求的基本功能。

准备工作
首先从http://jquery.com/下载最新版本的jQuery,然后从http://www.highcharts.com/下载Highcharts的JavaScript类库。将这两个文件下载到本地的Web项目的JS文件下。
因为Highcharts是根据js脚本中的属性设置来生成图表的,因为我们需要在ASP.NET中输出这些脚本。为了方便,周公将生成各种图表的核心逻辑部分抽取出来作为一个模板,需要的时候从这些模板中读取数据,然后将模板中的标签替换掉,这样就可以输出到客户端了。这些带有标签的JS模板位于js/template目录下。
除了输出控制逻辑代码之外,还要在网页的ready客户端事件中调用,如下格式:
$(document).ready(function() {//这里是逻辑和控制代码});

编码
为了便于演示,周公在创建ASP.NET页面的时候使用了单页模式,整个页面的代码如下:


演示
运行页面之后,效果如下:



说明:1.在官方的实例中是采用了ajax.googleapis.com上的jQuery库,如果在不能联网的局域网中则不能正常运行,因为周公直接将jQuery类库下载到本地,这样就不需要联网也能运行了。2.在官方示例中,是直接在$(document).ready()这个方法中将全部逻辑放在这个方法中,在实际开发中可能有大量的逻辑需要判断和处理,所以在这个例子中采用模板替换的方式。本文的示例代码请稍后在http://zhoufoxcn.download.csdn.net/下载(我已经上传,但需要CSDN审核才能下载)。
周公
2011-4-7

分享到:
评论

相关推荐

    Highcharts开源的JS图表控件简介

    Highcharts开源的JS图表控件简介:制作图表的...PHP、Asp.net还是Java都可以使用highcharts.js还有IE和Jquery类库或者MooTools类库;提示功能:鼠标移动到图表的某一点上有提示信息;选中图表部分放大,近距离观察图表。

    JQuery Highcharts图表使用说明

    • 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库; • 提示功能:鼠标移动到图表的某...

    Highcharts图表使用说明

    • 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库; • 提示功能:鼠标移动到图表的某...

    Highcharts(JavaScript图表库)v6.2.0

    Highcharts是一个制作图表的纯Javascript类库。 主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone、IE和...跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件h

    HighCharts图表控件在ASP.NET WebForm中的使用总结(全)

    从事过ASP.NET开发的可能都会接触到一些图表控件,比如OWC、ZendGraph等等,这些控件都有一个特点,那就是我们可以像操作.NET中的对象一样控制它们的某些属性,有可能在本地开发好了上传到服务器端部署运行的时候会...

    基于Jquery的图表Highcharts

    * 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库; * 提示功能:鼠标移动到图表的某...

    Highcharts图表示例

    从事过ASP.NET开发的可能都会接触到一些图表控件,比如OWC、ZendGraph等等,这些控件都有一个特点,那就是我们可以像操作.NET中的对象一样控制它们的某些属性,有可能在本地开发好了上传到服务器端部署运行的时候会...

    JavaScript 图表库Highcharts v6.2.0

    跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库;提示功能:鼠标移动到图表的某一点上有...

    Highcharts-3.0.6统计图表多种示例

    Highcharts 3.0.6 非常棒的统计图表插件,javascript脚本编写,直接添加引用,asp.net C# 开发成功引用。

    ASP.NET MVC+EF6+Bootstrap开发C#源代码

    图表插件:echarts、highcharts 2、后端技术 核心框架:ASP.NET MVC5、WEB API 持久层框架:EntityFramework 定时计划任务:Quartz.Net组件 安全支持:过滤器、Sql注入、请求伪造 服务端验证:实体模型验证...

    Highcharts-4.0.4中文api和demo

    3.不受语言约束:HighCharts可以在大多数的WEB开发中使用,并且对个人用户免费,支持ASP,PHP,JAVA,.NET等多种语言中使用。 4.提示功能:HighCharts生成的图表中,可以设置在数据点上显示提示效果,即将鼠标移动...

    Highcharts图表库 v8.1.2

    为您提供Highcharts图表库下载,Highcharts是一个制作图表的纯Javascript类库。Highcharts主要特性:1、兼容性:兼容当今所有...5、跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts

    Highcharts-4.0.4含中文API

    3.不受语言约束:HighCharts可以在大多数的WEB开发中使用,并且对个人用户免费,支持ASP,PHP,JAVA,.NET等多种语言中使用。 4.提示功能:HighCharts生成的图表中,可以设置在数据点上显示提示效果,即将鼠标移动...

    highcharts 中文文档

    跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库; 提示功能:鼠标移动到图表的某一点上有...

    Highcharts-8.1.2.zip

    Highcharts 可以在所有的移动设备及电脑上的浏览器中使用,包括 iPhone,iPad 和 IE6 以上的版本,在 IOS 和 Android 系统中 Highcharts 支持多点触摸功能,因而可以给您提供极致的用户体验。在现代的浏览器中使用 ...

    highcharts

    •跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库; •提示功能:鼠标移动到图表的某一点...

    Highcharts实例+详解

    5、跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库 6、支持大部分的图表类型:直线图,...

    Highcharts-2.1.2

    跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库; 提示功能:鼠标移动到图表的某一点上...

    Highcharts

    * 纯JS,跨语言:不管是Asp、PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,二是支持打印和导出图片的exporting.js,三是Jquery类库(jquery.min.js)或者MooTools...

Global site tag (gtag.js) - Google Analytics