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

关于“HighCharts图表控件在ASP.NET WebForm中的使用总结（全）”，下面是完整攻略：

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

什么是HighCharts

HighCharts 是一种基于 JavaScript 的图表库，可用于在 Web 页面中创建互动性的图表。它提供了多种图表类型，包括线性图、扇形图、柱状图等等。HighCharts 的主要特点是易于使用、美观、可扩展性强等。

HighCharts的环境搭建

要在 ASP.NET Web Form 中使用 HighCharts，需要完成以下步骤：

步骤 1：引入 HighCharts.js

在 ASP.NET Web Form 留有 HighCharts 图表的页面中，需要引用 HighCharts.js 文件，以便使用 HighCharts。

<script src="https://code.highcharts.com/highcharts.js"></script>

步骤 2：添加要显示的图表元素

创建一个用于放置 HighCharts 图表的 div 元素。

<div id="container" style="width:100%;height:400px;"></div>

步骤 3：编写 JavaScript 代码

有了 HighCharts.js 文件和用于容纳图表的 div 元素之后，就可以开始编写 JavaScript 代码来生成 HighCharts 图表了。下面是一个简单的示例：

$(function () {
    // 定义图表配置项
    var options = {
        chart: {
            renderTo: 'container',
            type: 'line',
        },
        title: {
            text: 'Monthly Site Visit',
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        },
        yAxis: {
            title: {
                text: 'Visits',
            },
        },
        series: [{
            name: 'Site Visits',
            data: [7, 12, 18, 11, 14, 8],
        }],
    };

    // 使用 HighCharts 图表库创建图表
    var chart = new Highcharts.Chart(options);
});

这段代码生成了一个简单的线性图表，展示每个月的网站访问量。

除了这个示例之外，HighCharts 还支持多种图表类型、多种数据格式、给数据点添加标签等功能。详细的使用方法可以查看 HighCharts 的官方文档：https://www.highcharts.com/docs/index

针对ASP.NET WebForm的注意事项

由于 ASP.NET Web Form 的特殊性，使用 HighCharts 时有一些需要注意的事项，下面是两个示例：

示例 1：在 ASP.NET Web Form 中动态生成 HighCharts 图表

有时情况可能是这样的：数据是从数据库中获取的，需要在 ASP.NET Web Form 中动态生成 HighCharts 图表。这时需要通过后端编程语言（比如 C#）生成 JSON 格式的数据，再由 JavaScript 代码读取生成图表。

protected void Page_Load(object sender, EventArgs e)
{
    // 模拟从数据库获取数据
    string[] categories = new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun" };
    int[] visits = new int[] { 7, 12, 18, 11, 14, 8 };

    // 将数据转为 JSON 格式
    StringBuilder sb = new StringBuilder();
    sb.Append("[{");
    sb.Append("\"name\":\"Site Visits\",");
    sb.Append("\"data\":[");
    for (int i = 0; i < categories.Length; i++)
    {
        sb.Append(visits[i]);
        if (i != categories.Length - 1)
        {
            sb.Append(",");
        }
    }
    sb.Append("],");
    sb.Append("\"categories\":[");
    for (int i = 0; i < categories.Length; i++)
    {
        sb.Append("\"" + categories[i] + "\"");
        if (i != categories.Length - 1)
        {
            sb.Append(",");
        }
    }
    sb.Append("]}]");

    // 注册 JavaScript 代码
    string script = "var options = {";
    script += "chart:{renderTo:'container',type:'line'},";
    script += "title:{text:'Monthly Site Visit'},";
    script += "xAxis:{categories:" + sb.ToString() + "[0].categories,},";
    script += "yAxis:{title:{text:'Visits'},},";
    script += "series:" + sb.ToString() + ",";
    script += "};";
    script += "var chart = new Highcharts.Chart(options);";
    Page.ClientScript.RegisterStartupScript(this.GetType(), "ChartScript", script, true);
}

这段 C# 代码模拟从数据库中获取数据，把数据转成 JSON 格式，并注册一段含有 JSON 数据的 JavaScript 代码。由于是在后端生成 JavaScript 代码，所以需要用到 Page.ClientScript.RegisterStartupScript 方法。这个方法的参数中，第一个是 type，可以用来指定在哪个对象类型的脚本内部运行，一般用 this.GetType() 代替，以确保 JavaScript 代码可以在当前页面中运行。

示例 2：在 UpdatePanel 中用 HighCharts

如果使用了 ASP.NET Ajax 的 UpdatePanel，可能会出现图表不能正常显示的情况，需要进行额外的处理。

<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <div id="container" style="width:100%;height:400px;"></div>
    </ContentTemplate>
</asp:UpdatePanel>

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
    var options = {
        chart: {
            renderTo: "container",
            type: "line",
        },
        title: {
            text: "Monthly Site Visit",
        },
        xAxis: {
            categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
        },
        yAxis: {
            title: {
                text: "Visits",
            },
        },
        series: [{
            name: "Site Visits",
            data: [7, 12, 18, 11, 14, 8],
        }],
    };
    var chart = new Highcharts.Chart(options);
});

UpdatePanel 会在局部刷新时重新加载这个 div 元素，导致 HighCharts 图表失效。解决方法是在 UpdatePanel 的 endRequest 事件回调中重新运行 JavaScript 代码。这个事件的实现方法在上面的例子中给出。

这就是 HighCharts 图表控件在 ASP.NET WebForm 中的使用总结。需要注意的是，由于 HighCharts 的强大功能和可定制性，本文只给出了最基础的使用方法和注意事项，如果需要更高级的效果，需要查看 HighCharts 的官方文档。