ASP.NETでのEchartsのダイナミック表示と複数のグラフを簡単に挿入

プロジェクトの作成

ファイル->新規->プロジェクト->ASP.NET Webアプリケーション(EchartsDemo)->選択テンプレート(Empty)->決定

プロジェクトを右クリック->追加->新規項目->OWIN Startupクラス(Startup.cs)

プロジェクトを右クリック->追加->webフォーム(Default.aspx)

プロジェクトを右クリック->追加->webフォーム(Default.aspx)

参照->参照の追加(Newtonsoft.Json.dll)

using Newtonsoft.Json.Linq;

JSスクリプトの作成AjaxによるタイミングリフレッシュJS forループJsonによる

  <script>
        $(
            function () {
                fetchData();
                window.setInterval(fetchData, 2000);
            }
        );
        function fetchData() {
            $.ajax({
                type: 'GET',
                url: '/GetFileHandler.ashx',
                dataType: 'json',
                success: function (option) {
                    for (var key in option)
                    {
                        var myChart = echarts.init(document.getElementById(key));
                        myChart.setOption(option[key]);
                        console.log(key + " " + option[key]); //  json     key/value ,p key
                    }
                    console.log(result);
                },
                error: function(result) {
                    console.log(result.responseText);
                }
            });
        }
    </script>

ASP.NETバックグラウンドプログラム作成パッチJSONパッケージ関数

 public JObject LineCharts(object[] date, object[] value)
        {
            return new JObject(
                new JProperty(
                    "xAxis", new JObject(
                        new JProperty("type", "category"),
                        new JProperty("data", new JArray(date)))),
                new JProperty(
                    "yAxis", new JObject(
                        new JProperty("type", "value"),
                        new JProperty("splitLine",
                            new JObject(
                                new JProperty("show", false)))
                    )),
                new JProperty("series", new JArray(
                    new object[] { new JObject(new JProperty("data", new JArray(value)),
                        new JProperty("type", "line"),
                        new JProperty("symbol", "triangle"),
                        new JProperty("symbolSize", 20),
                        new JProperty("lineStyle", 
                            new JObject(new JProperty("color", "#3FBBA7"),
                                new JProperty("width", 4),
                                new JProperty("type", "dashed"))),
                        new JProperty("itemStyle",
                            new JObject( new JProperty("borderWidth", 2),
                                new JProperty("borderColor", "#34F2D3"),
                                new JProperty("color", "#1F5F55"))
                        )), }
                ))
            );

複数のグラフ関数をカプセル化してJSON呼び出しに接合するJson送信

 public void ProcessRequest(HttpContext context)
        {
            Random r = new Random();
            object[] date = { "03/16"........ };
            //var value = new[] { 820, 932, 901, 934, 1290, 1330, 1320 };
            object[] value = { r.Next(0, 1000)........ };
            object[] date1 = { "03/16",...... };
            object[] value1 = { r.Next(0, 1000),....... };
            var option = new JObject(
                new JProperty("LineCharts", LineCharts(date, value)),
                new JProperty("PieCharts", PieCharts(date1, value1))
                );
            Console.WriteLine(option.ToString());
            context.Response.ContentType = "text/plain";
            //    Json  
            context.Response.Write(option.ToString());
        }

効果はbodyにHTMLを追加したりCSSを呼び出したりEChartsを追加したりして自分の望む効果を描くことができます以上の方法で複数のグラフを実現し、そのデータを呼び出すことができます.

 <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <link href="./index.css" rel="stylesheet">