您的位置：首页 > 编程语言 > ASP

ASP.NET Highcharts图表(1)-环境配置及第一个实例

2017-04-29 13:57 399 查看
一，简介

ASP.NET图表实现无非两个大方向：基于后端、基于前端。

所谓基于后端，可以是控件库，一般比较重量级，而且侵入感比较强，可移植性差（.Net Framework版本间移植、.Net与JSP、PHP间移植）。

所以还是基于前端好，侵入感比较低（反正都得用前端），可移植性好（前后端分离）。

本篇就是介绍一个非常好用的，完全基于前端Javascript的图表库，注意该库对个人、非商业用途是免费的，而且兼容性好、轻量级、开源，所以就具备了良好的可维护性、可拓展性。

本篇主要是介绍在ASP.NET环境下，借助Highcharts实现图表绘制的全流程。

二，环境配置

1，既然是基于ASP.NET的图表，所以环境首先得有个VS，此处猫哥是用的VS2013。然后工程是基于.NET Framework2.0的ASP.NET窗体网站，工程名HighchartsDemo。（这个都不是重点，VS创建的C# Web项目都可以）。

2，Highcharts是基于jQuery的，下载jQuery后放于Scripts目录下，猫哥直接就用工程生成的jquery-1.7.1.js了。

3，从Highcharts官网，下载HIGHCHARTS 5.0.10。下载后解压。将解压目录下code文件夹下的文件都拷贝到Scripts目录，如下图。



4，在网页引用jQuery和Highcharts，要注意引入highcharts.src.js

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Highcharts 欢迎使用</title>
<script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Scripts/highcharts.src.js"></script>
</head>
<body>
</body>
</html>


三，第一个Highcharts应用

1，首先在页面放一个div，用于在里面安置图表。

<!--div容器，在里面放置一个图表-->
<div id="myChart" style="width: 600px; height: 500px; margin: 0 auto"></div>


2，为图表准备一个数据源，注意Highcharts的数据源是Javascript的对象。

<script type="text/javascript">
$(document).ready(function () {
//数据源
var dataSource = {};
//标题
var title = {
text: '语文成绩走势'
};
//设置数据源的标题
dataSource.title = title;
//将数据应用于div
$('#myChart').highcharts(dataSource);
});
</script>


3，预览如下，说明 
$('#myChart').highcharts(dataSource);
已经生效。



四，后续内容

由以上实例可见，Highcharts原理很简单，就是绑定Javascript对象。

我们只需要知道各种图表需要绑定的对象的格式，即可轻易的制作各种网页图表，实在实在轻松愉快。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航