使用 jQuery Ajax 在 ASP.NET 中使用 Highcharts

• 下载演示 - 111 KB

引言

Highcharts 是一个用纯 JavaScript 编写的图表库，提供了一种简单的方法，可以将交互式图表添加到你的网站或 Web 应用程序中。 Highcharts 目前支持折线图、样条图、面积图、面积样条图、柱状图、条形图、饼图、散点图、角度量规、区域范围、面积样条范围、柱状范围、气泡图、箱线图、误差线、漏斗图、瀑布图和极坐标图等类型。

Highcharts 的主要功能

兼容性

它适用于所有现代移动设备和桌面浏览器，包括 iPhone/iPad 和 Internet Explorer 6 及更高版本。 在 iOS 和 Android 上，多点触控支持提供了无缝的用户体验。

 开放性

 Highcharts 的关键功能之一是，无论你拥有哪种许可证，免费或付费，你都可以下载源代码并进行自己的编辑。这允许进行个性化修改，并具有极大的灵活性。

 纯 JavaScript

Highcharts 仅基于原生浏览器技术，不需要客户端插件，如 Flash 或 Java。

 多种图表类型

 Highcharts 支持折线图、样条图、面积图、面积样条图、柱状图、条形图、饼图、散点图、角度量规、区域范围、面积样条范围、柱状范围和极坐标图等类型。 其中许多可以在一个图表中组合使用。
 

简单的配置语法

 设置 Highcharts 配置选项不需要特殊的编程技能。 选项以 JavaScript 对象表示法结构给出，它基本上是一组由冒号连接、由逗号分隔并由大括号分组的键和值。

 导出和打印

启用导出模块后，你的用户可以单击按钮将图表导出为 PNG、JPG、PDF 或 SVG 格式，或直接从网页打印图表。

步骤 1-安装

Highcharts 需要三个文件才能运行，highcharts.js,exporting.js 和 jquery.min.js。 exporting.js 是一个用于导出图表的可选 javascript 文件。 你可以从这里下载这些文件。

http://www.highcharts.com/download

步骤 2-在数据库中创建表

在实际应用中，你可以使用连接从多个表中获取记录。现在对于这个演示，我正在数据库中创建一个简单的表。我们需要在数据库中设计一个表，以从数据库中获取数据。

完成表设计后，在表中输入一些名称和值以供我们的示例使用。
你可以从下载文件夹中获取 script.sql 文件并在数据库中执行。现在，我们将创建一个 Web 方法
在 Web 服务中，我们将使用该方法从 jQuery 调用它。 你需要按照以下步骤操作。

步骤 3-创建 ASP.NET Web 服务

因此，将 .asmx 页面添加到当前解决方案中，并按以下示例修改代码，使用 System。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;//
using System.Data.SqlClient;//
namespace HighchartDemo.Services
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class HighchartService : System.Web.Services.WebService
    {
        public class FruitEnity
        {
            public string Name { get; set; }
            public int Value { get; set; }
        }
        [WebMethod]
        public List<FruitEnity> FruitAnalysis()
        {
            List<FruitEnity> fruitinfo = new List<FruitEnity>();
            DataSet ds = new DataSet();
            using (SqlConnection con = new SqlConnection("Data Source=XXXX;User Id=XXXX;
            Password=XXXX;DataBase=XXXX"))
            {
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.CommandText = "select name,value from tbl_fruitanalysis";
                    cmd.Connection = con;
                    using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                    {
                        da.Fill(ds, "FruitAnalysis");
                    }
                }
            }
            if (ds != null)
            {
                if (ds.Tables.Count > 0)
                {
                    if (ds.Tables["FruitAnalysis"].Rows.Count > 0)
                    {
                        foreach (DataRow dr in ds.Tables["FruitAnalysis"].Rows)
                        {
                            fruitinfo.Add(new FruitEnity { Name = dr["name"].ToString(),
                            Value = Convert.ToInt32(dr["value"]) });
                        }
                    }
                }
            }
            return fruitinfo;
        }
    }
}

步骤 4-实现 Jquery AJAX

首先，你需要将 jQuery 库和 highcharts 库拖放到你的 ASPX 页面中

  $(document).ready(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Services/HighchartService.asmx/FruitAnalysis",
                data: "{}",
                dataType: "json",
                success: function (Result) {
                    Result = Result.d;
                    var data = [];
                    for (var i in Result) {
                        var serie = new Array(Result[i].Name, Result[i].Value);
                        data.push(serie);
                    }
                    DreawChart(data);
                },
                error: function (Result) {
                    alert("Error");
                }
            });
        });
        function DreawChart(series) {
     
   $('#container').highcharts({

                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: 1, //null,
                    plotShadow: false
                },
                title: {
                    text: 'fruit  market shares at a specific month, 2014'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                          enabled: true,
                          format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                          style: {
                          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Fruit share',
                    data:series
                }]
            });
        }

输出

下一篇文章即将推出，包含柱状图或饼图的钻取功能。

关注点

 别忘了 启用属性 [System.Web.Script.Services.ScriptService]，并在 Web 服务中在函数定义之前添加 [Web Method] 属性。

点击此处查看 highcharts 文档   http://api.highcharts.com/highcharts
点击此处查看 highcharts 论坛  http://forum.highcharts.com
如果你正在寻找 DotNet Highchart（在代码隐藏中编写），请点击此处 http://dotnethighcharts.codeplex.com