在ASP.NET中使用Highcharts js图表

最新推荐文章于 2020-02-25 20:10:32 发布
最新推荐文章于 2020-02-25 20:10:32 发布
阅读量912 收藏
点赞数 1
分类专栏： .Net系列 文章标签： asp.net string buffer asp javascript server

从事过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页面的时候使用了单页模式，整个页面的代码如下：

<%@ Page Language="C#" %>  
<%@ Import Namespace="System.Text" %>  
<%@ Import Namespace="System.IO" %>  
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 
<mce:script runat="server"><!--  
    public string result = string.Empty;  
    protected void Page_Load(object sender, EventArgs e)  
    {  
        string graphType = ddlGraphType.SelectedValue;  
          
        graphType = graphType.ToLower();  
        switch (graphType)  
        {  
            case "line": result=OutputLine(); break;  
            case "spline": result = OutputSpline(); break;  
            case "area": result = OutputArea(); break;  
            case "areaspline": result = OutputAreaSpline(); break;  
            case "column": result = OutputColumn(); break;  
            case "bar": result = OutputBar(); break;  
            case "pie": result = OutputPie(); break;  
            case "scatter": result = OutputScatter(); break;  
        }  
    }  
 
    private string OutputLine()  
    {  
        string result = string.Empty;  
        using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/line.js"), Encoding.UTF8))  
        {  
            StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
            buffer.Replace("{#title#}", "周公的演示例子");  
            result = buffer.ToString();  
        }  
        return result;  
    }  
 
    private string OutputSpline()  
    {  
        string result = string.Empty;  
        using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/spline.js"), Encoding.UTF8))  
        {  
            StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
            buffer.Replace("{#title#}", "周公的演示例子");  
            result = buffer.ToString();  
        }  
        return result;  
    }  
 
    private string OutputArea()  
    {  
        string result = string.Empty;  
        using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/area.js"), Encoding.UTF8))  
        {  
            StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
            buffer.Replace("{#title#}", "周公的演示例子");  
            result = buffer.ToString();  
        }  
        return result;  
    }  
 
    private string OutputAreaSpline()  
    {  
        string result = string.Empty;  
        using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/areaspline.js"), Encoding.UTF8))  
        {  
            StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
            buffer.Replace("{#title#}", "周公的演示例子");  
            result = buffer.ToString();  
        }  
        return result;  
    }  
 
    private string OutputColumn()  
    {  
        string result = string.Empty;  
        using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/column.js"), Encoding.UTF8))  
        {  
            StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
            buffer.Replace("{#title#}", "周公的演示例子");  
            result = buffer.ToString();  
        }  
        return result;  
    }  
 
    private string OutputBar()  
    {  
        string result = string.Empty;  
        using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/bar.js"), Encoding.UTF8))  
        {  
            StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
            buffer.Replace("{#title#}", "周公的演示例子");  
            buffer.Replace("{#subTitle#}", "扇形图表");  
            //下面的数据应该是从数据库来，为了演示，这里直接上了  
            string data = "{name: '1812年',data: [107, 31, 635, 203, 2]}, {name: '1912年',data: [133, 156, 947, 408, 6]}, {name: '2012年',data: [973, 914, 4054, 732, 34]}";  
            buffer.Replace("{#series#}", data);  
            result = buffer.ToString();  
        }  
        return result;  
    }  
 
    private string OutputPie()  
    {  
        string result = string.Empty;  
        using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/pie.js"), Encoding.UTF8))  
        {  
            StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
            buffer.Replace("{#title#}", "周公的演示例子");  
            result = buffer.ToString();  
        }  
        return result;  
    }  
 
    private string OutputScatter()  
    {  
        string result = string.Empty;  
        using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/scatter.js"), Encoding.UTF8))  
        {  
            StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
            buffer.Replace("{#title#}", "周公的演示例子");  
            result = buffer.ToString();  
        }  
        return result;  
    }  
// --></mce:script>  
 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>Hign Charts 实例</title>  
<mce:script src="js/jquery-1.5.2.min.js" mce_src="js/jquery-1.5.2.min.js" type="text/javascript"></mce:script>  
<mce:script src="js/highcharts.js" mce_src="js/highcharts.js" type="text/javascript"></mce:script>  
 
</head>  
<body>  
    <form id="form1" runat="server">  
    <div>  
    <table border="0" width="800">  
    <tr><td>请选择图表类型：<asp:DropDownList runat="server" ID="ddlGraphType"   
            AutoPostBack="True">  
        <asp:ListItem>line</asp:ListItem>  
        <asp:ListItem>spline</asp:ListItem>  
        <asp:ListItem>area</asp:ListItem>  
        <asp:ListItem>areaspline</asp:ListItem>  
        <asp:ListItem>column</asp:ListItem>  
        <asp:ListItem>bar</asp:ListItem>  
        <asp:ListItem>pie</asp:ListItem>  
        <asp:ListItem>scatter</asp:ListItem>  
        </asp:DropDownList></td></tr>  
    <tr><td><div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div></td></tr>  
    </table>  
    </div>  
      
    </form>  
    <mce:script type="text/javascript"><!--  
        var chart;  
        $(document).ready(function() {  
<%=result %>  
            });  
                  
          
// --></mce:script>  
</body>  
</html> 
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Text" %>
<%@ Import Namespace="System.IO" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<mce:script runat="server"><!--
    public string result = string.Empty;
    protected void Page_Load(object sender, EventArgs e)
    {
        string graphType = ddlGraphType.SelectedValue;
       
        graphType = graphType.ToLower();
        switch (graphType)
        {
            case "line": result=OutputLine(); break;
            case "spline": result = OutputSpline(); break;
            case "area": result = OutputArea(); break;
            case "areaspline": result = OutputAreaSpline(); break;
            case "column": result = OutputColumn(); break;
            case "bar": result = OutputBar(); break;
            case "pie": result = OutputPie(); break;
            case "scatter": result = OutputScatter(); break;
        }
    }

    private string OutputLine()
    {
        string result = string.Empty;
        using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/line.js"), Encoding.UTF8))
        {
            StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
            buffer.Replace("{#title#}", "周公的演示例子");
            result = buffer.ToString();
        }
        return result;
    }

    private string OutputSpline()
    {
        string result = string.Empty;
        using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/spline.js"), Encoding.UTF8))
        {
            StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
            buffer.Replace("{#title#}", "周公的演示例子");
            result = buffer.ToString();
        }
        return result;
    }

    private string OutputArea()
    {
        string result = string.Empty;
        using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/area.js"), Encoding.UTF8))
        {
            StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
            buffer.Replace("{#title#}", "周公的演示例子");
            result = buffer.ToString();
        }
        return result;
    }

    private string OutputAreaSpline()
    {
        string result = string.Empty;
        using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/areaspline.js"), Encoding.UTF8))
        {
            StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
            buffer.Replace("{#title#}", "周公的演示例子");
            result = buffer.ToString();
        }
        return result;
    }

    private string OutputColumn()
    {
        string result = string.Empty;
        using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/column.js"), Encoding.UTF8))
        {
            StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
            buffer.Replace("{#title#}", "周公的演示例子");
            result = buffer.ToString();
        }
        return result;
    }

    private string OutputBar()
    {
        string result = string.Empty;
        using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/bar.js"), Encoding.UTF8))
        {
            StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
            buffer.Replace("{#title#}", "周公的演示例子");
            buffer.Replace("{#subTitle#}", "扇形图表");
            //下面的数据应该是从数据库来，为了演示，这里直接上了
            string data = "{name: '1812年',data: [107, 31, 635, 203, 2]}, {name: '1912年',data: [133, 156, 947, 408, 6]}, {name: '2012年',data: [973, 914, 4054, 732, 34]}";
            buffer.Replace("{#series#}", data);
            result = buffer.ToString();
        }
        return result;
    }

    private string OutputPie()
    {
        string result = string.Empty;
        using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/pie.js"), Encoding.UTF8))
        {
            StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
            buffer.Replace("{#title#}", "周公的演示例子");
            result = buffer.ToString();
        }
        return result;
    }

    private string OutputScatter()
    {
        string result = string.Empty;
        using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/scatter.js"), Encoding.UTF8))
        {
            StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
            buffer.Replace("{#title#}", "周公的演示例子");
            result = buffer.ToString();
        }
        return result;
    }
// --></mce:script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Hign Charts 实例</title>
<mce:script src="js/jquery-1.5.2.min.js" mce_src="js/jquery-1.5.2.min.js" type="text/javascript"></mce:script>
<mce:script src="js/highcharts.js" mce_src="js/highcharts.js" type="text/javascript"></mce:script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table border="0" width="800">
    <tr><td>请选择图表类型：<asp:DropDownList runat="server" ID="ddlGraphType"
            AutoPostBack="True">
        <asp:ListItem>line</asp:ListItem>
        <asp:ListItem>spline</asp:ListItem>
        <asp:ListItem>area</asp:ListItem>
        <asp:ListItem>areaspline</asp:ListItem>
        <asp:ListItem>column</asp:ListItem>
        <asp:ListItem>bar</asp:ListItem>
        <asp:ListItem>pie</asp:ListItem>
        <asp:ListItem>scatter</asp:ListItem>
        </asp:DropDownList></td></tr>
    <tr><td><div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div></td></tr>
    </table>
    </div>
   
    </form>
    <mce:script type="text/javascript"><!--
        var chart;
        $(document).ready(function() {
<%=result %>
            });
    
  
// --></mce:script>
</body>
</html>
 

 演示
 运行页面之后，效果如下：
 


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


本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zhoufoxcn/archive/2011/04/07/6306759.aspx

loveheye
关注
专栏目录
asp.net_echarts后台动态获取数据
07-09
自己练手写的几个例子： demo1和demo2是echart两种不同的写法，数据是写死的，仅供参考，推荐以demo2为模板。 demo3、demo4、demo5是ajax动态从后台获取json数据的例子。 demo3是折线图和柱状图。 demo4是饼图。 demo5是双折线(柱状)图。
如何使用ASP.NET Core，Angular 5和Highcharts创建在线民意测验
cumian9828的博客
07-23 401
In this article, we will create an online polling application using ASP.NET Core, Angular 5, and the Entity Framework Core. Since this is the season of Indian Premiere League cricket in India, we will...
在asp.net中如何自己编写highcharts图表导出到自己的服务器上来
weixin_30505043的博客
12-06 190
1.准备工作：网上下载highcharts导出的关键dll。 1）、Svg.dll：因为highcharts的格式其实就是一个xml，采用svg的方式画图； 2）、itextsharp.dll：这样主要是用于处理和提取highcharts图表内的文字以及编码问题； 2.创建一个简单asp.net项目，并把上述两个程序集引入到项目中，OK。3.给出页面代码： <%@...
HighCharts图表控件在ASP.NET WebForm中的使用总结（全）
09-03
在ASP.NET WebForm中使用HighCharts，可以让开发者轻松地在Web应用程序中添加丰富的可视化元素，而且对于个人学习、个人网站和非商业用途，HighCharts是免费的。 在传统的使用方式中，开发人员需要在HTML的`<head>`...
asp.net(c#) 与 highcharts 数据库交互
06-16
Highcharts 是一个流行的JavaScript图表库，用于在网页上创建交互式的图表，而ASP.NET (C#) 则是微软的服务器端编程框架，用于构建动态网站和Web应用。在本项目中，我们看到`highcharts.aspx`和`highcharts.aspx.cs`...
动态Highcharts – ASP.NET Core，Angular6
04-11
在本项目中，我们主要探讨如何利用Angular6和ASP.NET Core构建动态的Highcharts图表。Highcharts是一款强大的JavaScript图表库，能够帮助开发者轻松地在Web应用中创建各种数据可视化图表，如柱状图、折线图、饼图等...
Highcharts导出图片ASP.NET解决中文乱码问题
08-25
Highcharts默认使用UTF-8编码，而ASP.NET应用可能使用其他编码方式，比如GB2312或GBK，这就可能导致在导出过程中中文字符无法正确显示。解决这个问题的关键在于确保从服务器到客户端的数据传输过程中，编码始终保持...
使用ASP.NET，Angular 5，EF core和Highcharts创建轮询应用程序（上）
xiaochuachua的博客
01-02 356
下载Highcharts最新版本 在本教程中，我们将使用ASP.NET Core，Visual Studio 2017，SQL Server 2014，Angular 5和Entity Framework核心创建在线轮询应用程序。由于这是印度IPL赛季（印度专业Twenty20板球联赛），我们将为“谁将赢得2018年IPL”创建一个在线投票。轮询结果将使用Highcharts显示为柱形图。你...
ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件
dotNET跨平台
10-21 682
ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core。 曾经在WebForms上写过 HighchartsNET快速图表控件-开源 Highcharts的ASP.NET Web自定义控件。 今天我就来改造它，将其使用最新的TagHelper 来实践，学习TagHelper 的使用也提供一个方便的图表控
ASP.NET Core +Highchart+ajax绘制动态柱状图
weixin_39714231的博客
06-21 796
一.项目介绍 利用前端Highchart，以及ajax向后台获取数据，绘制动态柱状图。hightchart其他实例可查看官网文档。Highchart 二.准备工作 先搭建项目以及所要访问的数据库及数据，这里不做赘述。 然后编写Controller代码，用于提供数据。 [HttpPost] public JsonResult GetDataList(int BeformDays,...
ASP.NET+Echarts绘制图表
weixin_44146294的博客
02-25 5497
首先去百度搜索Echarts去下载图表实例，或者直接点击链接：Echarts图表实例下载。其中可以自定义下载，也可以下载全部，根据个人需求进行实例的下载即可！ ...
ASP.NET Highcharts图表(1)-环境配置及第一个实例
程序员大阳
04-29 2656
一，简介ASP.NET图表实现无非两个大方向：基于后端、基于前端。所谓基于后端，可以是控件库，一般比较重量级，而且侵入感比较强，可移植性差（.Net Framework版本间移植、.Net与JSP、PHP间移植）。所以还是基于前端好，侵入感比较低（反正都得用前端），可移植性好（前后端分离）。本篇就是介绍一个非常好用的，完全基于前端Javascript的图表库，注意该库对个人、非商业用途是免费的，而且
Asp .net MVC4 利用Highcharts.js 生成曲线图
03-22 261
一、先来看看效果 　　 二、前台实现代码 　　1、引入相对应得css及Javascript文件 <link href="~/Content/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/css/css.css" rel="stylesheet" />...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值