C# asp.net mvc 中來自 Chart.js 的行不起作用

Question

我在使用 C# asp.net mvc 時遇到問題。 我的圖表中的線沒有顯示出來。 我嘗試了許多不同的圖表，但它不起作用。 目標是使用我的數據庫值來畫線。

我的觀點：Estatisticas.cshtml

  @model Estágio_TP.Models.Alerta

@{
    ViewBag.Title = "Estatisticas";
}

<h2>Estatisticas  de @Html.DisplayFor(model => model.nomeAlerta)</h2>




<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <title>Doughnut Chart</title>

    <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <title>Gráfico Chart</title>

    <script src="~/Content/js/Chart_est.js"></script>

    

</head>
<body>
    <div id="chartContainer1" style="width: 100%; height: 500px;display: inline-block;"></div>
    <br /><br /><br />
    <div id="chartContainer2" style="width: 100%; height: 500px;display: inline-block;"></div>
    <!--<div class="card-body">
        <div class="chart-area">
             <canvas id="teste_est"style="width: 100%; height: 500px;display: inline-block;"></canvas>
        </div>
    </div>-->
    

    <script type="text/javascript">

        function chart1(){
            var chart1 = new CanvasJS.Chart("chartContainer1", {
                title: {
                    text: " @Html.DisplayFor(model => model.nomeTrigger)"
                },
                animationEnabled: true,
                legend: {
                    fontSize: 20,
                    fontFamily: "Helvetica"
                },
                theme: "light2",
                data: [
                    {
                        type: "doughnut",
                        indexLabelFontFamily: "Garamond",
                        indexLabelFontSize: 20,
                        indexLabel: "{label} {y}%",
                        startAngle: -20,
                        showInLegend: true,
                        toolTipContent: "{legendText} {y}%",
                        dataPoints: [
                            { y: @ViewData["valor"], legendText: "Em Uso", label: "Em Uso"
        },
        { y: 100 - @ViewData["valor"], legendText: "Livre", label: "Livre" },
                    ],

                    //dataPoints: @Html.Raw(ViewBag.DataPoints),
                }
                ]
            });
        chart1.render();
        }


        $(document).ready(function () {
            showChart3();
        });
      function showChart3() {


          $.get("/alertas/json/", function (data) {

              var tempo = [];
              var valor = [];
              for (var i in data) {
                  tempo.push(data[i].tempo);
                  valor.push(data[i].valor);
              }
              

              var chart = new CanvasJS.Chart("chartContainer2", {
                  animationEnabled: true,
                  theme: "light2",//light1
                  title: {
                      text: "Gráfico ao Longo do Dia"
                  },
                  data: [
                      {
                          // Change type to "bar", "splineArea", "area", "spline", "pie",etc.
                          type: "line",
                          dataPoints: data
                      }
                  ]
              });

              chart.render();
          });
           
        }



        function start() {
            chart1();
            showChart3();           
        }

        window.onload = start();
        

 
    </script>

   <!-- <script src="~/Content/js/teste_estatistica.js"></script>-->

</body>
</html>

控制器：

        public ContentResult JSON(string id)
    {
        var teste_xx = db.Conteudos.Where(a => a.nomeAl == id)
         .Where(a => a.Data_cont.Day == DateTime.Now.Day)
         .OrderBy(a => a.Data_cont)
         .Select(a => new
         {
             valor = a.max_valor,
             tempo = a.Data_cont //.ToString("hh:mm")
          });

        List<DataPoint> dataPoints;
        dataPoints = new List<DataPoint>();

        foreach (var result in teste_xx)
        {
            //list2.Add(result.tempo.ToString());
            //list2.Add(result.valor.ToString());
            var tempo = result.tempo;
            var valor = result.valor;
            dataPoints.Add(new DataPoint(tempo, valor));
        }

        JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };

        return Content(JsonConvert.SerializeObject(dataPoints, _jsonSetting), "application/json");
    }

}

DB：只需要 DateTime("hh:mm:ss") 和 max_value

數據庫

Answer 1

有很多問題需要修改。

您導入 canvasjs.min.js 兩次...只需導入 1 次。
我只解決您的Alertas/Json操作，我沒有Alertas/Estatisticas的模型Estágio_TP.Models.Alerta所以頁面不會顯示chartContainer1的解決方案。
我修改了Json操作以返回JsonResult 。 不是ContentResult 。
您的Alertas/Json應該采用一個Id參數，因此我在$.get("/alertas/json/1");對該參數進行了硬編碼$.get("/alertas/json/1");
我假設一些簡單的數據庫數據來顯示這個圖表會起作用。
分配axisX的屬性，包括時間格式/間隔
以x和y為關鍵來分配數據dataPoints ，而不tempo您的tempo和valor為關鍵。

我的版本有效：

統計.cshtml

<div id="chartContainer2" style="width: 100%; height: 500px;display: inline-block;"></div>

@section scripts {
    <script>
        $(document).ready(function () {
            showChart3();
        });
        function showChart3() {
            $.get("/alertas/json/1", function (data) {
                var dataPoints = [];
                for (var i in data) {
                    dataPoints.push({
                        x: new Date(parseInt(data[i].tempo.replace("/Date(", "").replace(")/", ""), 10)),
                        y: data[i].valor
                    });
                }
                console.log(dataPoints);

                var chart = new CanvasJS.Chart("chartContainer2", {
                    animationEnabled: true,
                    theme: "light2",
                    title: {
                        text: "Gráfico ao Longo do Dia"
                    },
                    axisX: {
                        interval: 10,
                        intervalType: "minute",
                        valueFormatString: "YYYY/MM/DD HH:mm"

                    },
                    data: [
                        {
                            type: "line",
                            dataPoints: dataPoints
                        }
                    ]
                });

                chart.render();
            });

        }
    </script>
}

控制器

public JsonResult JSON(string id)
{
    var db = new List<Conteudos>()
    {
        new Conteudos()
        {
            Data_cont = DateTime.Now,
            max_valor = 10,
            nomeAl = "1"
        },
         new Conteudos()
        {
            Data_cont = DateTime.Now.AddHours(1),
            max_valor = 40,
            nomeAl = "1"
        },
          new Conteudos()
        {
            Data_cont = DateTime.Now.AddHours(2),
            max_valor = 30,
            nomeAl = "1"
        },
           new Conteudos()
        {
            Data_cont = DateTime.Now.AddHours(3),
            max_valor = 50,
            nomeAl = "1"
        },
            new Conteudos()
        {
            Data_cont = DateTime.Now.AddHours(4),
            max_valor = 60,
            nomeAl = "1"
        }
    };
    var teste_xx = db.Where(a => a.nomeAl == id)
     .Where(a => a.Data_cont.Day == DateTime.Now.Day)
     .OrderBy(a => a.Data_cont)
     .Select(a => new
     {
         valor = a.max_valor,
         tempo = a.Data_cont //.ToString("hh:mm")
     });

    List<DataPoint> dataPoints;
    dataPoints = new List<DataPoint>();

    foreach (var result in teste_xx)
    {
        //list2.Add(result.tempo.ToString());
        //list2.Add(result.valor.ToString());
        var tempo = result.tempo;
        var valor = result.valor;
        dataPoints.Add(new DataPoint(tempo, valor));
    }


    return Json(dataPoints, JsonRequestBehavior.AllowGet);
}

C# asp.net mvc 中來自 Chart.js 的行不起作用

問題描述

1 個解決方案

解決方案1
0 2020-08-24 01:46:33

C# asp.net mvc 中來自 Chart.js 的行不起作用

問題描述

1 個解決方案

解決方案1 0 2020-08-24 01:46:33

解決方案1
0 2020-08-24 01:46:33