JQuery和HighCharts: JavaScript图标库

最新推荐文章于 2024-03-08 22:31:50 发布

tzw_cs

最新推荐文章于 2024-03-08 22:31:50 发布

阅读量481

点赞数

CC 4.0 BY-SA版权

分类专栏： Software 文章标签： javascript jquery

本文链接：https://blog.youkuaiyun.com/tanzhangwen/article/details/77531844

Software 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用HighCharts和JQuery实现数据可视化。包括从前端发起数据请求到后端处理并返回JSON数据的过程，以及如何将这些数据在前端进行图表展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery

教程：http://www.w3school.com.cn/jquery/

HighCharts

教程：http://www.runoob.com/highcharts/highcharts-tutorial.html

Ticks:

1. 从数据库中取出的数据可以先转化为JSON格式：new JavaScriptSerializer().Serialize(List<Object>);

2. 处理数据请求的：ProcessRequest(HttpContext context)返回JSON数据。

    public class ProcessRequestClass : IHttpHandler
    {
        public static string dbConStr = ConfigurationManager.ConnectionStrings["DBConStr"].ToString();
        public void ProcessRequest(HttpContext context)
        {
            string parameterValue = context.Request["paramter"];
 
            string jsonStr = FetchDataFromDBAndConvert(parameterValue);

            context.Response.ContentType = "application/json";
            context.Response.Write(jsonstr);
            context.Response.End();
        }
    }

3. 前端展示的处理:请求数据

                $.ajax({
                    url: 'ProcessRequestClass.ashx',
                    type: 'POST',
                    dataType: 'json',
                    data: "parameter1=" + pValue1 + "&parameter2=" + pValue2,
                    timeout: 3000,
                    cache: false,
                    beforeSend: BeforeSendFunction, //What to do before the request was sent
                    error: ErrorFunction, //Action to do for error
                    success: ShowDataFunction //Action to do when load successfully
                })

4. 展示数据

                function ShowDataFunction(data) {
                    if (data == null || data.length == 0) {
                        $("#Container1").empty();
                        alert("data null!");
                        return;
                    }
                    var arrayData = eval(data); // json type to array
                    // Show data in graph
                    options.series = new Array();
                    options.chart.type = "line";
                    options.chart.renderTo = "Container1";
                    options.title.text = "Chart Title";
                    options.subtitle.text = "Chart Sub Title";
                    options.xAxis.categories = arrayData.map(function (x) { return x.field1; });
                    options.series.push({
                        "name": "Series1Name",
                        "data": arrayData.map(function (x) { return x.field2; }),
                        "lineWidth": 3
                    });
                    options.series.push({
                        "name": "Series2Name",
                        "data": arrayData.map(function (x) { return x.field3; }),
                        "dashStyle": "dash",
                        "lineWidth": 1,
                        "color": "#FF0000"
                    });
                    var chart = new Highcharts.Chart(options);
                }

5. 定义展示数据的ID元素:上面的例子可以看到要在Container1上展示，所以boday部分就需要定义这样一个ID。