C# asp.net mvc 中 Chart.js 的行不起作用答案

【问题标题】：Line from Chart.js in C# asp.net mvc does not workC# asp.net mvc 中 Chart.js 的行不起作用
【发布时间】：2020-08-23 16:17:56
【问题描述】：

我在使用 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

数据库

【问题讨论】：

标签： javascript c# asp.net-mvc

【解决方案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"); 中硬编码参数
我假设一些简单的 db 数据可以显示此图表。
分配axisX的属性，包括时间格式/间隔
将dataPoints 与x 和y 作为键，而不是tempo 和valor 作为键。

我的版本有效：

Estatisticas.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);
}

【讨论】：