HighCharts图表控件在ASP.NET WebForm中的使用总结（全）
作者：mrr 发布时间：2022-07-13 02:11:12
从事过ASP.NET开发的可能都会接触到一些图表控件，比如OWC、ZendGraph等等，这些控件都有一个特点，那就是我们可以像操作.NET中的对象一样控制它们的某些属性，有可能在本地开发好了上传到服务器端部署运行的时候会出现权限问题而导致不能正常运行。本篇周公讲述一个JavaScript的图表控件，不要小看了这个JavaScript图表控件，它能生成各种常见的图表。
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
HighCharts使用原理如下图所示：
普通开发模式是在前端应用Jquery和HighChartsJS库文件，然后在<head>头中写Js脚本，例如绘制饼图Jquery脚本如下：
绘制饼图Jquery脚本
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}％</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' ％';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
其中data属性为图表绑定数据源。但这种方式也存在明显问题：
前端代码量过大
绑定动态数据比较困难，可取的方法是使用$.AJAX异步方法解析WebServices或者一般处理程序ashx，然后对返回结果进行JSON序列化处理，比较麻烦容易出错。
HighCharts的Js调用代码无法实现代码重用。
解决方案是使用第三方HighCharts组件DoNet.HighCharts, 该组件是一个服务器端生成HighCharts Js脚本的开源组件，然后通过输出流的方式插入到页面Body块的DIV中,原理如下图所示：
DoNet.HighCharts开发环境为(二选一)
VS2008+ASP.NET MVC3+.NET 3.5
VS2010+.NET 4.0
DoNet.HighCharts开源项目是以ASP.NET MVC3 Project的形式分发的，开发人员可以参考控制器文件夹Controlls中的DemoController中每种图表的后台代码（和前台HighCharts JS代码基本一致）
MVC原理在这里做简单表述，便于程序员阅读该代码。
M:Module 模型层
V:View 视图层
C:Controll 控制层
当客户端发送一个Action动作时，根据动作名找到Controll控制器中相应的方法名。例如 http://localhost/Charts/Demo/BasicLine，MVC 框架根据全局路由配置自动映射到BasicLine控制器方法，控制器方法返回一个Result并导航到Views文件夹下的同名视图BasicLine.cshtml(cshtml可以理解为WebForm的aspx)然后加载视图。
Asp.net mvc和Asp.net Web Form方式不同，所以以上MVC实现方式需要修改才能在WebForm中使用。以下以“各种类产品均价统计功能”柱形图（涉及到NorthWind数据库的Products和Categories表）为例说明WebForm中如何使用DoNet.HighCharts。
1: 创建查询视图View_CategoryAvgPrice
2: 创建强名称数据集NorthWind.xsd
数据集分为强名称数据集和弱名称数据集(DataSet)两种，具体原理就不展开描述了。拖放View_CategoryAvgPrice和Categories表到数据集中。
3: 柱形图控制器方法（ColumnWithDrilldown）在aspx页面中的主要代码实现
柱形图控制器方法（ColumnWithDrilldown）在aspx页面中的主要代码实现
//导入DoNet.HighCharts包
using DotNet.Highcharts;
using DotNet.Highcharts.Options;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts.Helpers;
using System.Drawing;
using NorthWindTableAdapters;
/// <summary>
/// 种类商品价格统计类
/// </summary>
public class CategoryPrice
{
public Decimal Price { set; get; }
public string CategoryName { set; get; }
}
public partial class ColumnWithDrilldown : System.Web.UI.Page
{
#region 创建强名称数据集表对象和数据适配器对象
private NorthWind.View_CategoryAvgPriceDataTable avgPriceDt;
avgPriceDt= new NorthWind.View_CategoryAvgPriceDataTable();
private NorthWind.CategoriesDataTable categoryDt = new NorthWind.CategoriesDataTable();
private View_CategoryAvgPriceTableAdapter avgPriceAdapter = new View_CategoryAvgPriceTableAdapter();
private CategoriesTableAdapter categoryAdapter = new CategoriesTableAdapter();
#endregion
private List<CategoryPrice> avgPriceList=null;//绑定数据源集合
protected void Page_Load(object sender, EventArgs e)
{
LoadColumnWithDrilldown();
}
public void LoadColumnWithDrilldown()
{
avgPriceAdapter.Fill(avgPriceDt);
categoryAdapter.Fill(categoryDt);
//按产品种类分组显示Linq表达式
avgPriceList =
(
from p in avgPriceDt
group p by p.CategoryID into g//根据种类编号分组
select new CategoryPrice
{
//种类名称
CategoryName=categoryDt.First(c=>c.CategoryID==g.Key).CategoryName,
//种类商品均价
Price = g.Average(c => c.UnitPrice)
}
).ToList();
//显示柱形图的种类名称数组
string[] categories = new string[avgPriceList.Count()];
int index = 0;
foreach (var item in avgPriceList)
{
categories[index++] = item.CategoryName;
}
Data data = LoadDate();//柱形图动态绑定的数据源
//省略HighCharts脚本代码，同mvc代码
div1.InnerHtml = chart.ToHtmlString();//转换为HighCharts的客户端脚本插入到div1中
}
//根据汇总的种类商品创建柱形图节点对象的方法
private Data LoadDate()
{
Data data = null;
int index =-1;
//创建柱形图显示的节点对象
DotNet.Highcharts.Options.Point []pointList=new DotNet.Highcharts.Options.Point[avgPriceList.Count];
foreach (var item in avgPriceList)
{
pointList[++index] = new DotNet.Highcharts.Options.Point
{
Y = (Number)(item.Price*100)/100.0,
Color = Color.FromName(string.Format("colors[{0}]", index))
};
}
data = new Data(pointList);
return data;
}
}
显示效果如下图所示：
0
投稿猜你喜欢
实现功能：模拟简单登录功能，登录成功跳转新页面，登录失败在原登录界面提示登录失败信息开发环境：eclipseTomcat-8.0预备知识：H- 两种方法，第一种是静态开启方法把application 或者 activity的主题设置为Theme.Holo即可<?xml vers
- 本文实例讲述了Java面向对象程序设计：类的定义，静态变量，成员变量，构造函数，封装与私有，this概念与用法。分享给大家供大家参考，具体如
- C#调用C++ dll string类型返回为了这个问题，百度了一堆不靠谱的资料，什么C#调用c++类型对应啥的，说用string ,Str
- 一、MessageBox弹出框MessageBox.Show（<字符串> Text, <字符串> Title, &l
- 关于unicode和utf的关系，可以简单的记忆：Unicode是一个编码组织、一个编码规范、在java中指utf-16；utf是Unico
- 问题起因主要是使用mybatis作为ORM之后，返回的对象为Map，然后对于数据库的datetime,datestamp类型返回为时间戳而不
- 看代码吧~package com.mtpc.admin.controller.exportSql;import ch.qos.logback
- Android 实现会旋转的饼状统计图实例代码最近在做一个项目，由于有需要统计的需要，于是就做成了下面饼状统计图。 下图是效果图： 大致思路
- 修改好的代码下载地址:https://github.com/Vico-H/Launcher•不显示开机向导-----------------
- 数据库表结构departmentemployee要求一现在的要求是输入 id 把 employee 表的对应员工数据查询出来，并且查询出该员
- 最近有一个java实验，要求用java使用数据库，于是本人新手小白，在idea上卡了好半天希望看到这个博客的人能解决问题，跳过一些坑首先，我
- 有的时候，我们需要对一堆数据进行统计分析后生成HTML或Excel格式报表。本来这并不是一件很难的事，但确是件比较麻烦的事情。最令人头痛的是
- 在java中如果我们需要遍历集合并删除其中的某些元素时，例如对于List来说，我们有三种办法。1. 普通的for循环遍历并删除public
- 本文实例讲述了微信js sdk invalid signature签名错误问题的解决方法。分享给大家供大家参考，具体如下：/**最近在做微信
- springcloud集成nacos遇到的问题1.获取不到配置文件信息有时候新建了配置文件后浏览器访问发现获取不到里面的值，原来spring
- 为什么要自定义缓存注解？Spring Cache本身提供@Cacheable、@CacheEvict、@CachePut等缓存注解，为什么还
- 实现过滤器很简单，只需要继承ZuulFilter,并实现ZuulFilter中的抽象方法。filterType()：定义过滤器的类型，它有4
- 本文以实例代码实现了C#根据数字序号输出星期几，用户可通过输入数字0~6，输出星期各天的英语单词，程序中主要是演示if语句和switch语句
- 本文实例讲述了C# Socket网络编程技巧。分享给大家供大家参考。具体分析如下：客户端要连接服务器：首先要知道服务器的IP地址。而服务器里
