定時動態更新圖表

時間 2019-11-13

標籤定時動態更新圖表简体版

原文原文鏈接

在進行實現動態更新圖表時主要使用AJAX技術，主要分兩種實現方法，一種是經過ASP.NET特有的AJAX控件，UpdatePanel、Timer控件+ASP.NET自帶的Chart控件實現；另外一種爲使用第三方的圖表庫+JQUERY\AJAX實現。javascript

ASP.NET控件實現

實現：

前臺將要定時刷新的內容放到updatePanel中便可，前臺代碼以下：html

    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Path="~/MyScript.js" /> //useless
            </Scripts>
            <Services>
                <asp:ServiceReference Path="~/MyService.asmx" /> //useless
            </Services>
        </asp:ScriptManager>
        <div>
            <asp:UpdatePanel ID="ReportPanel" runat="server">
                <ContentTemplate>
                     <h1>
                        ASP.NET AJAX自動刷新【GridView】
                    </h1>
                    <asp:GridView ID="GridView1" runat="server"></asp:GridView>
                   
                    <asp:Timer ID="Time1" runat="server" Interval="5000" OnTick="Time1_Tick" ></asp:Timer>
                    <asp:Label runat="server" ID="ResultLabel" />
                    <br />
                </ContentTemplate>
                <Triggers >
                    <asp:AsyncPostBackTrigger EventName="Tick" ControlID="Time1" />
                </Triggers>
            </asp:UpdatePanel>
        </div>
    </form>

後臺代碼主要實現定時刷新，使用Timer控件的事件比較簡單java

 protected void Time1_Tick(object sender, EventArgs e)
    {
        GridView1.DataSource = task.GetData();
        GridView1.DataBind();

        ResultLabel.Text = task.GetData().Tables[0].Rows.Count.ToString() +
            "  |  " + DateTime.Now.ToString() ;
    }

問題：

使用ASP.NET系列控件實現起來比較簡單，可是因爲自帶的chart控件，生成的圖表爲圖片，因此在每次刷新時，會出現閃動的狀況。jquery

AJAX+EChart實現

EChart爲百度實現的功能強大的圖表庫，官方文檔很詳細，但使用起來也比較複雜web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>初始化圖表時經過ajax同步獲取數據並渲染圖表示例</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/esl.js" type="text/javascript"></script>
    <script src="js/echarts.js" type="text/javascript"></script>
</head>
<body>
    <!--定義頁面圖表容器-->
    <!-- 必須制定容器的大小（height、width） -->
    <div id="main" style="height: 400px; border: 1px solid #ccc; padding: 10px;">
    </div>
    <script type="text/javascript" language="javascript">
        // Step:4 require echarts and use it in the callback.
        // Step:4 動態加載echarts而後在回調函數中開始使用，注意保持按需加載結構定義圖表路徑
        require(
        [
            'echarts',
            'echarts/chart/line' //按需加載圖表關於線性圖、折線圖的部分
        ],
        DrawEChart //異步加載的回調函數繪製圖表
        );

        var myChart;

        //建立ECharts圖表方法
        function DrawEChart(ec) {
            //--- 折柱 ---
            myChart = ec.init(document.getElementById('main'));
            //圖表顯示提示信息
            myChart.showLoading({
                text: "圖表數據正在努力加載..."
            });
            //定義圖表options
            var options = {
                title: {
                    text: "經過Ajax獲取數據呈現圖標示例",
                    subtext: "www.stepday.com",
                    sublink: "http://www.stepday.com/myblog/?Echarts"
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: []
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: false
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitArea: { show: true }
                    }
                ],
                series: []
            };

            //經過Ajax獲取數據
            $.ajax({
                type: "post",
                async: false, //同步執行
                url: "/Ajax/GetChartData.aspx?type=getData&count=12",
                dataType: "json", //返回數據形式爲json
                success: function (result) {
                    if (result) {                        
                        //將返回的category和series對象賦值給options對象內的category和series
                        //由於xAxis是一個數組 這裏須要是xAxis[i]的形式
                        options.xAxis[0].data = result.category;
                        options.series = result.series;
                        options.legend.data = result.legend;
                        myChart.hideLoading();
                        myChart.setOption(options);
                    }
                },
                error: function (errorMsg) {
                    alert("很差意思，大爺，圖表請求數據失敗啦!");
                }
            });
        }
    </script>
</body>
</html>

後臺GetData.aspx代碼ajax

 private void GetAjaxData(string pointCount)
        { 
            //爲了演示效果 這裏採用隨機數據來代替 後期能夠根據本身狀況換成訪問數據獲取數據
            //考慮到圖表的category是字符串數組 這裏定義一個string的List
            List<string> categoryList = new List<string>();
            //考慮到圖表的series數據爲一個對象數組 這裏額外定義一個series的類
            List<Series> seriesList = new List<Series>();

            //考慮到Echarts圖表須要設置legend內的data數組爲series的name集合這裏須要定義一個legend數組
            List<string> legendList = new List<string>();

            int _pointCount;
            //若是數據非整型 默認給予10個數據
            if (!int.TryParse(pointCount,out  _pointCount))
            {
                _pointCount = 10;
            }

            //設置legend數組
            legendList.Add("Series 1"); //這裏的名稱必須和series的每一組series的name保持一致

            //定義一個Series對象
            Series seriesObj = new Series();
            seriesObj.id = 1;
            seriesObj.name = "Series 1";
            seriesObj.type = "line"; //線性圖呈現
            seriesObj.data = new List<int>(); //先初始化 不初始化後面直直接data.Add(x)會報錯

            //設置數據
            for (int i = 1; i <= _pointCount; i++)
            { 
                //加入category刻度數組
                categoryList.Add(string.Format("刻度{0}", _pointCount));

                //加入數據值series序列數組 這裏提供爲了效果只提供一組series數據好了                
                seriesObj.data.Add(i); //數據依次遞增
            }
            //將sereis對象壓入sereis數組列表內
            seriesList.Add(seriesObj);

            //最後調用相關函數將List轉換爲Json
            //由於咱們須要返回category和series、legend多個對象 這裏咱們本身在new一個新的對象來封裝這兩個對象
            var newObj = new { 
                                category = categoryList,
                                series = seriesList,
                                legend = legendList
                                };
            //Response返回新對象的json數據
            Response.Write(newObj.ToJson());
            Response.End();
        }
    }

    /// <summary>
    /// 定義一個Series類 設置其每一組sereis的一些基本屬性
    /// </summary>
    class Series
    {
        /// <summary>
        /// sereis序列組id
        /// </summary>
        public int id
        {
            get;
            set;
        }

        /// <summary>
        /// series序列組名稱
        /// </summary>
        public string name
        {
            get;
            set;
        }

        /// <summary>
        /// series序列組呈現圖表類型(line、column、bar等)
        /// </summary>
        public string type
        {
            get;
            set;
        }

        /// <summary>
        /// series序列組的數據爲數據類型數組
        /// </summary>
        public List<int> data
        {
            get;
            set;
        }

問題：

Echart控件須要先設置好div大小後再進行初始化圖像，不能根據數據量動態改變圖形區的大小json

AJAX+HighChart

實現

<head>
    <title>highcharts </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />     
    <meta name="apple-mobile-web-app-capable" content="yes" />    
    <meta name="format-detection" content="telephone=no" />   

     <script  type="text/javascript"  src="js/jquery.min.js"></script>
    <script  type="text/javascript"  src="js/highcharts.js"></script>  
 <!--   <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>-->
</head>
<body>
    <div id="container" style="height: 400px;">
    </div>
        <script type="text/javascript">
            var chart;
            var options;
            $(function () {
                DrawChart();
            });
            function DrawChart() {
                options = {
                    chart: {
                        renderTo: 'container',
                        animation: false,
                        type: 'bar'
                    },

                    title: {
                        text: '菜品銷售動態'
                    },
                    xAxis: { categories: [], title: { text: null} },
                    yAxis: { min: 0, title: { text: '銷售額 (元)', align: 'high' }, labels: { overflow: 'justify'} },
                    credits: {
                        enabled: false
                    },

                    series: [{
                        name: '銷售額',
                        animation: false,
                        dataLabels: {
                            enabled: true
                        },
                        data: []
                    }]
                };
                chart = new Highcharts.Chart(options);
                GetAjaxChartData();
            }
            function Change() {
                var container = document.getElementById("container");
                container.style.height = "800px";
                DrawChart();
            }

            //點擊按鈕獲取圖表數據採用ajax方式
            var GetAjaxChartData = function () {
                //經過Ajax獲取數據
                $.ajax({
                    type: "post",
                    async: false, //同步執行
                    url: "GetData.aspx",
                    timeout: 5000,
                    dataType: "json", //返回數據形式爲json
                    success: function (result) {
                        if (result) {
                            //將返回的category和series對象賦值給options對象內的category和series
                            //                        options.xAxis.categories = ['asd', 'qwe','vvv'];
                            //                        options.series[0].data = [1, 2, 3];
                            document.getElementById("container").style.height = result.series.length * 21 + "px";
                            options.xAxis.categories = result.category;
                            //數據類要一致，value類型，不能使用string賦值
                            options.series[0].data = result.series;

                            chart = new Highcharts.Chart(options);
                        }
                    },
                    error: function (errorMsg) {
                        alert(errorMsg);
                    }
                });
            }
            setInterval(GetAjaxChartData, 5000);
    </script>
</body>

後臺數組

    /// <summary>
    /// 得到數據且用Json格式數據返回
    /// </summary>
    private void GetAjaxData()
    {
       
        TaskClass task = new TaskClass();
        DataTable dt = task.GetData().Tables[0];
        string[] xArr = new string[dt.Rows.Count];
        List<decimal> yArr = new List<decimal>();
        //設置數據
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            xArr[i] = dt.Rows[i][1].ToString();
            yArr.Add(Convert.ToDecimal(dt.Rows[i][4]));
        }
        //Response返回新對象的json數據
        var newObj1 = new
        {
            category = xArr,
            series = yArr
        };

        Response.Write(NewtonsoftJson(newObj1));
        Response.End();
    }

    public string NewtonsoftJson(object obj)
    {
        return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None);
    }

問題：

基本實現了想要的效果，可是也遇到了問題【HighCharts TypeError: I is not a function 】，最後發如今引入JQuery和highcharts文件時，JQuery必須必需要放在上面。app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。